make images the same size in bootstrap grid

Question

I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size. I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size. Should I just get rig of the thumbnail class or is there another solution?

Answer 1

I think the property you're looking for is object-fit

img {
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
}

The object-fit property works similarly to how you would using background-size: cover on a background image to make it fill the page without stretching. This way, you can define a width in a rule that all images will follow to ensure that they are the same size without distorting your picture.

Other values you can use with this property includes:

• fill - stretch the image.
• contain - preserve the aspect ratio of the image.
• cover - Fill the height and width of the box.
• none - Keep the original size.
• scale-down - compare the differences between none and contain to find the smallest object size.

object-fit | CSS-Tricks