行高与行中元素的高度不同

Question

在 Bootstrap 中，我认为行的高度等于该行的一列中最高元素的高度。我添加了 4 张图片，其中 3 张的尺寸为 2048x1362，而第 4 张图片的尺寸为 1362x2048。我认为行的高度等于 2048（见图）。

为了使所有列的高度相同，我添加了 css 来明确设置第四张图像的高度。

<img src="images/fathersday3.jpg" class="img-fluid  rounded-circle  d-none d-sm-block" style="height:1362px;">

但令我惊讶的是，第四张图片变大了（见下图）

显然，行的高度最初不是 2048 像素。

我的问题

1. img 标签中没有添加 css 时，行高是多少。
2. 如何使所有图像的高度相同？

Answer 1

我认为您首先需要了解 img-fluid 的工作原理。

添加尺寸为 1362x2048 的图像并不意味着该图像在 Bootstrap Grid 中显示时将完全具有该尺寸。

为什么？因为你应用了一个类 .img-fluid。这意味着您的图像只能与容器列一样宽。因此，图像宽度缩小，高度自动调整大小，同时保持比例。所以，不能说当时你的行会有多高。

虽然您可以使列的高度相同（B4 已经使用 flexbox 做到了）。对于图片，您需要上传相同大小/比例且高度相同的图片。

关于让您感到惊讶的事情，它的发生是因为您明确指定了图像的高度。就像我之前说的，由于 img-fluid 缩小了图像高度可能会降低一些值。当您指定高度时，它“必须”使图像高度变大。 因此您的图像会过度拉伸。