CODEWITHSUNDEEP
htmlcss
Vincent ROUILLARD MELTZ
Vincent ROUILLARD MELTZ

Reputation: 115

bootstrap - make cards with images having same height

As you can see, i do have 3 bootstrap cards having 3 images with different heights. I want to make the images having same height compared to others (like the bigger one "takes the lead" and all the other one in the row adapting to this bigger one).

enter image description here

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
        <a href="/led/catalogue/produit/1"><img class="card-img-top" src="/images/produits/1" alt=""></a><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>

I already put the h-100 class in the card div but it only adapts the card's height, and I want the images to be adapted (in order to not have the blank after the text), how to do that pls?

Upvotes: 1

Views: 1327

Answers (4)

Aleksandr Belugin
Aleksandr Belugin

Reputation: 2227

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="">
        </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>

Upvotes: 2

Godwin Tommy
Godwin Tommy

Reputation: 81

give the image div a fixed height, use the height preference of the largest image to put a fix height on the dive of the image, this will allow the all to show the same way.

Upvotes: 0

Shailesh Patil
Shailesh Patil

Reputation: 244

Give fix height suppose 150px to the wrapper of image(anchor tag). Then for the image tag use max-width: 100%, height: auto, display: block

Upvotes: 0

Lokesh Suman
Lokesh Suman

Reputation: 503

Use the following CSS

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

The object-fit: cover; enables zoom instead of image stretching.

Upvotes: 2

Related Questions