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 rid of the thumbnail class or is there any other 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>

If all the images are the different sizes, then they'll become distorted if you make them all the same height and width. You need to decide if you want them all the same width, OR the same height. — Carol Skelly, Jul 28 '17 at 18:05
did you know about boostrap4 that uses flex ? https://v4-alpha.getbootstrap.com/utilities/flexbox/ since you are trying to use flex :) — G-Cyrillus, Jul 28 '17 at 18:31
@ZimSystem thank you for that info, I completely forgot about it. — Jacob Murin, Jul 28 '17 at 19:41

score 48 · Answer 1 · answered Jul 28 '17 at 18:23

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

excellent solution. does this also work on old browsers such as Internet Explorer? — Student22, Feb 02 '19 at 03:17

score 3 · Answer 2 · edited Dec 04 '20 at 03:30

3

Add the css class img-responsive to every image.

edited Dec 04 '20 at 03:30

Joundill

6,828
12
36
50

answered Jul 28 '17 at 18:02

Chris Cousins

1,862
8
15

score 0 · Answer 3 · answered Jul 28 '17 at 18:04

0

just modify this:

img {
    width: 100px; // how much you want
    min-height: 100px;
    float: left;
    margin: 10px;
}

answered Jul 28 '17 at 18:04

Shark

77
1
1
8

score 0 · Answer 4 · edited May 18 '18 at 13:16

0

Go to "Inspect Element" in your browser and look for something like:

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: auto; }

Change it to:

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: 300px; //change as per your requirement }

edited May 18 '18 at 13:16

Andrew Myers

2,754
5
32
40

answered May 18 '18 at 12:13

Dushyant Surya

25
1

1

This would distort the image – molerat May 14 '19 at 10:50

Radha · Answer 5 · 2020-04-18T13:44:08.900

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. Top level, is Container and rows and columns are displayed under it. In Bootstrap, there are 4 classes xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)

How to decide on column display: A page is divided into 12columns grid and width is calculated as width: percentage((@columns / @grid-columns)); 1 column / 12 grid-columns = 8.33% * 1170px = 97.5px there are no partial pixels so browsers rounds the number. col-md-2 - Will display 6 images in a row. 2 means 2 columns to display an image

col-sm-12 - Class will help in stacking the image when opened on small devices

.img-center - Is custom class to defined additional properties for the image box Hope this helps.

.img-center {
  text-align: center; 
  border-radius: 8px;
  width: 100px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
  display: flex;
  margin: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="EightImages.css" />
    <link rel="images" href="images" />
    <link rel="stylesheet" href="css/bootstrap-grid.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />
          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
      </div>
    </div>

    <script src="js/bootstrap.min.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. — Maximouse, Apr 18 '20 at 11:29
I have added details and updated the snippet using bootstrap grid only. Hope this helps — Radha, Apr 18 '20 at 13:45

score 0 · Answer 6 · edited Jun 08 '23 at 20:27

As was commented by Dushyant Surya, try this:

I added 2 extra rules to make the img prettier. I can't comment because i don't have reputation points yet btw. But this works fine for me!

.thumbnail a>img, .thumbnail>img {
  display: block;
  width: 100%;
  height: 250px;
  // but add these to make your images prettier and keep the quality.
  object-fit: cover;
  image-resolution: from-image;
}

Make images the same size in bootstrap grid

6 Answers6

Linked