bootstrap - make cards with images having same height - html

Question

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).
<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">
<img class="card-img-top" src="/images/produits/1" alt=""><hr>
<div class="card-body">
<h6 class="card-title">
slt la mif
</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?

Answer 1

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">
<span class="img_mock1"></span>
</div>
<hr>
<div class="card-body">
<h6 class="card-title">
slt la mif
</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">
slt la mif
</h6>
<small class="text-muted">Puissance : 10 à 100W</small>
</div>
</div>
</div>
</div>

Answer 2

Use the following CSS
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
The object-fit: cover; enables zoom instead of image stretching.

Answer 3

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

Answer 4

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.