Sorry, the title must be terrible to understand, but I don’t know how to really explain it.
How can I fit my image "carouselMap" in the div "carouselItem", with an aspect ratio of 2/3, the width (of the map) being 100% of "carouselItem"’s width ?
I made a paint "drawing" to explain it.
.carouselItem {
height: 100%;
width: 100%;
border: 1px solid black;
}
.carouselMap {
aspect-ratio: 2/3;
width: 100%;
}
Thanks for your help 🙏
2
Answers
The solution was to create a div to contain the image, make it 100% of the width, give it an aspect ratio of 2/3, and put the image inside, center it, and give it a height of 100%
Is the map an image? If so, just style
.carouselMap
withobject-fit: cover
. This style causes an image (or any ‘replaced’ element) to be scaled to fill its specified dimensions by cropping itself in either the horizontal or vertical axis in order to retain its natural aspect ratio.A snippet to demonstrate: