Question

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

为了使所有列的高度相同，我添加了css以显式设置第4张图像的高度。

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

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

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

我的问题

Answer 1

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

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

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

虽然您可以使列的高度相同（B4已经使用flexbox执行此操作）。对于图像，您需要以相同的高度上传相同大小/比例的图像。

关于令你惊讶的事情，它发生的原因是你明确指定了图像的高度。就像我之前说的那样，因为img-fluid而缩小的图像高度可能会降低一些。当你指定高度时，它“有”使图像高度变大。 因此，您的图片不成比例地伸展。