make images the same size in bootstrap grid
Solution 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.
Solution 2
Add the css class img-responsive
to every image.
Jacob Murin
Updated on July 17, 2022Comments
-
Jacob Murin almost 2 years
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?
body { padding-top: 70px;} .row .flex { display: inline-flex; width: 100%;} img { width:100%; min-height:100px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row match-to-row"> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/eKTUtA74uN0" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/x-tbVqkfQCU" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/cjpGSEkXfwM" alt=""> </div> </div> <div class="row match-to-row"> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/63JKK67yGUE" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/NqE8Ral8eCE" alt=""> </div> </div> <div class="row flex match-to-row"> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/6oUsyeYXgTg" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/WF2lvywxdMM" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/2FdIvx7sy3U" alt=""> </div> </div> </div> </div>
-
Student22 over 5 yearsexcellent solution. does this also work on old browsers such as Internet Explorer?
-
molerat about 5 yearsThis would distort the image
-
Maximouse about 4 yearsWhile this code snippet may solve the question, including an explanation really helps to improve the quality of your post.
-
Radha about 4 yearsI have added details and updated the snippet using bootstrap grid only. Hope this helps