
To fix this we can use some newer CSS properties that you may have not heard of. Object Fit & Object Position to the rescue

If you put the carousel above some content, the content beneath the images will shift as you try to read the content. When the image changes so does the height of the container. See the Pen Carousel Problem by Ray on CodePen. But what if the images aren't exactly the same height or proportions? The documentation tells you to add an an image with a class of d-block w-100 That means that it will shrink or stretch the image to whatever height will fit in the width.


Proportionally Cropping and Positioning an ImageĪ typical Bootstrap 5 Carousel cycles through a series of images and although you can crop them to be the same proportions, sometimes you need them to fit within a specific height.
