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

【问题标题】：Make images same height when there is no fixed height or width当没有固定的高度或宽度时，使图像具有相同的高度
【发布时间】：2021-12-14 12:17:48
【问题描述】：

是否有任何解决方案可以使不同尺寸的图像在卡片上具有相同的高度？问题是内容来自 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>

这是现在的样子：

example here

图像可能更高或更低。无法在 px 中修复它们。我需要那张卡片可以拉伸，而不是让图像变短。

【问题讨论】：

你试过类似.card img { height: 80px; width: auto} 的东西吗？
我不能在 px 中使用固定高度。图片可以是不同的块，不同的大小。
您想将它们设置为相同的高度...您想实现什么？
我用照片编辑了问题
这是否会给你任何想法或见解来接近codepen.io/sherloke/pen/rNzzweW？

标签： css image bootstrap-5 image-size

【解决方案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>

【讨论】：