当没有固定的高度或宽度时，使图像高度相同

Question

是否有任何解决方案使不同大小的图像在卡片上具有相同的高度?问题是内容来自cms，我不知道图像大小将是多少，多少文本将在卡片中。

<div class="card">
<div class="card-body h-100">
<div class="row d-flex h-100 mx-0">
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" class="img-fluid"
alt="image">
</div>
<div class="d-flex flex-column col-12 flex-grow-1 px-0">
<div class="mb-auto">Will be content...</div>
<a href="link" class="btn card-btn btn-outline-secondary" 
role="button">Button</a>
</div>
</div>
</div>

现在的样子:

例子

图像可以更高或更低。不能在px中固定它们。我需要的是卡片会拉伸，而不是图像会变短。

Answer 1

将这些添加到您的代码">

<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" style="object-fit: contain;"
alt="image">
</div>