Making All Images Appear with the Same Height in Bootstrap

Making all images appear with the same height in bootstrap

You could take off the width/height attributes in the HTML and do this with CSS. Just set your height explicitly, and your width as auto. For example:

.img-responsive {
    width: auto;
    height: 100px;
}

You'll need to be careful that you leave enough space horizontally because you won't know the exact width of any of these images once they've been scaled.

Keep row of images at same height

Step 1. Let's reproduce the problem

1. We don't need the bootstrap-theme.min.css. This file uses for the decoration only. First of all wee need bootstrap.min.css.
2. The 3.0.0 version is too old. Let'use the 3.4.1. instead. It's the latest Bootstrap 3 version.
3. Bootstrap assumes the row is inside the container. Sometimes the CMS has its own containers, and then you can get by with them, but to reproduce the problem, we need the correct code with the container.
4. Looking at your screenshot, I dare to assume that something on your site adds the max-width: 100%; restriction to all images. This is a fairly common solution for different themes.
5. I removed the block with the section padding-y classes, because the problem was reproduced without it.

So we get an example of a code that reproduces your screenshot.

img {
  max-width: 100%;
}

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/348x255/69c/fff">
    </div>
    <div class="col-sm-2">
      <img src="https://via.placeholder.com/233x255/c69/fff">
    </div>
    <div class="col-sm-2">
      <img src="https://via.placeholder.com/233x255/c69/fff">
    </div>
    <div class="col-sm-2">
      <img src="https://via.placeholder.com/233x255/c69/fff">
    </div>
    <div class="col-sm-2">
      <img src="https://via.placeholder.com/233x255/c69/fff">
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

bootstrap - make cards with images having same height

Bootstrap class card-body has property flex: 1, it means, that this element also grows for available space.

You can add some special class, for example to row, or higher, where you use card, to modify that parameter. Something like that.

.special .card-body {
  flex-grow: 0;
}

Also wrap link image with div which has class="flex-fill", it makes grow the link images.

Look into the snippet, I;ve added special class to row, and set different height to link images to illustrate the idea.

UPDATE. Made link images center

Play with flexboxes. For example: add to div which wraps <a> class d-flex it will make this div with display: flex. And then you can add to this div classes justify-content-center and align-items-center, but I prefer in your case to add class m-auto to <a>, it gives margin: auto, which make element centralized with flex parent. Look into snippet.

.special .card-body {

  flex-grow: 0;

}

.img_mock1 {

  padding: 50px;

  background-color: red;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row special">

  <div class="col-lg-4 col-md-6 mb-4">

    <div class="card h-100">

      <div class="flex-fill d-flex">

        <a href="/led/catalogue/produit/1" style="height:50px;" class="m-auto"><span class="img_mock1"></span></a>

      </div>

      <hr>

      <div class="card-body">

        <h6 class="card-title">

          <a href="/led/catalogue/produit/1">slt la mif</a>

        </h6>

        <small class="text-muted">Puissance : 10 à 100W</small>

      </div>

    </div>

  </div>

  <div class="col-lg-4 col-md-6 mb-4">

    <div class="card h-100">

      <div class="flex-fill d-flex">

        <a href="/led/catalogue/produit/1" style="height:300px;" class="m-auto">

          <img src="" alt="Sample Image">

        </a>

      </div>

      <hr>

      <div class="card-body">

        <h6 class="card-title">

          <a href="/led/catalogue/produit/1">slt la mif</a>

        </h6>

        <small class="text-muted">Puissance : 10 à 100W</small>

      </div>

    </div>

  </div>

</div>

How can I make these images same size using bootstrap?

1. To make the images same size set min-height to the images.
2. To make them smaller or bigger change the responsive classes class="col-md-4 col-sm-4". they are responsible for the width.
3. To use img-responsive class just add class="img-responsive" to the img tag.

Working Snippet

<!DOCTYPE html>

    <html lang="en">

    <head>

      <title>Bootstrap Example</title>

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

    

    <div class="container">

      <div class="row">

        <div class="col-md-4 col-sm-4">

          <div class="thumbnail">

            <a href="https://codemoji.com/blog/Coding.jpg" target="_blank">

              <img class="img-responsive" src="https://codemoji.com/blog/Coding.jpg" alt="Lights" style="min-height:400px;width:100%;">

            </a>

          </div>

        </div>

        <div class="col-md-4 col-sm-4">

          <div class="thumbnail">

            <a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">

              <img class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="Nature" style="min-height:400px;  width:100%;">

            </a>

          </div>

        </div>

        <div class="col-md-4 col-sm-4">

          <div class="thumbnail">

            <a href="http://www.discdepotdundee.co.uk/files/2014/07/intel-and-amd-processor-installation-disc-depot-dundee.jpg" target="_blank">

              <img class="img-responsive" src="http://www.discdepotdundee.co.uk/files/2014/07/intel-and-amd-processor-installation-disc-depot-dundee.jpg" alt="Fjords" style="min-height:400px; width:100%;">

            </a>

          </div>

        </div>

      </div>

    </div>

    

    </body>

    </html>

How to set image in same height using bootstrap?

You just need to set the img to cover the container, like

.card > img {
    width: 100%;
    height: 100%;
}

Setting images of equal size in Bootstrap

 <div class="col-lg-4 col-sm-6">
  <a href="#"> <div class='box'><img class="img-fluid" src="images/i6.jpg" /></div></a>
  <a href="#"> <h1> Party Dresses </h1> </a>
 </div>

just put inside a div and give the css with fixed size

.box{
  height:250px;
    width:300px;
    overflow:hidden;
}

How Can I Force Each Image in a Bootstrap Row to be the Same Height?

You set all images to width: 100%;. You have to decide whether the height or width is more important. Or else the pictures will be stretched.

Maybe min-height and/or max-height would help to adjust the size?

For dynamic width of the bootstrap containers use col-md-auto

---

Related Topics