CSS：在里面，<card>我想要一个最大高度的图像，并且采用所有宽度而不缩放

Question

我正在使用Bootstrap 4。我在卡片内有一个图像，这个图像将是卡片的标题：

<div class="card">
    <img src="..." class="card-img-top cardimg">
    <div class="card-body">
       ...
    </div>
</div>

我不知道图像的尺寸是哪些，因为它是由用户提供的，所以我想将最大高度设置为 160，我已经在 CSS 中尝试过：

.cardimg {
    max-height: 120px;
    width: auto;
}

还有其他几个版本，这部分是我想要的，标题的图像是 120px 高。问题是浏览器缩放宽度，有时看起来或多或少很好，有时很糟糕，具体取决于原始图像的高度和宽度。

那么，如何将图像扩展到最多 120px 并且不在 X 轴上缩放，我不在乎它是否会裁剪一点图像。

Answer 1

我找到了答案。在 CSS 中使用 object-fit: cover 属性，因此 CSS 将是：

.cardimg {
    height: 120px;
    width: auto;
    object-fit: cover;
}