Twitter Bootstrap Question posted in

Make images the same size in bootstrap grid – Twitter bootstrap

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>
Tags:

5

Answers


  1. 0

    Add the css class img-responsive to every image.

    Login or Signup to reply.
  2. 0

    just modify this:

    img {
    width: 100px; // how much you want
    min-height: 100px;
    float: left;
    margin: 10px;
}
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 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 }
    Login or Signup to reply.
  5. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search