将一排图像保持在相同的高度
Posted
技术标签:
【中文标题】将一排图像保持在相同的高度【英文标题】：Keep row of images at same height 【发布时间】：2020-08-27 02:32:27 【问题描述】：我正在使用 Bootstrap 3 网格（不幸的是，CMS 不允许我使用 Bootstrap 4）。目前我无法链接到该页面，所以这个问题可能太难回答了。
这是包含 5 列的行在 CMS 中的显示方式：
max-width 是 1200 像素。
问题是每次我添加包含图像的列时，图像高度都不相同。在此示例中，我将所有图像的高度设置为 255px，但第一列中的图像比其他图像高得多。
当我在 JSfiddle 中输入代码时，它看起来很正常
See jsfiddle here
那么一定是CMS里面有什么东西在干吗？有什么线索我可以照顾吗？
最好的问候
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.padding-y
padding: 20px;
background-color: #fff;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="section padding-y">
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
</div>
</div>【问题讨论】：
注意：<link> 标签不使用也不需要结束斜杠，并且在 html 中从来没有。
@rob SO 代码 sn-p 编辑器添加了/。
请张贴链接。如果您担心它会被索引，请将其混淆（“mydomain dot com slash slash ...”）。
@terrymorse 真的吗？！这太离谱了！我会调查的。我没有看到这种情况发生在我身上，但我可能不会这样做。
@Rob 点击“添加外部库”按钮，输入css文件路径。它将添加link 标签，并带有斜杠。
【参考方案1】：
第 1 步。让我们重现问题
-
我们不需要
bootstrap-theme.min.css。此文件仅用于装饰。首先我们需要bootstrap.min.css。
3.0.0 版本太旧。让我们使用 3.4.1。反而。这是最新的 Bootstrap 3 版本。
Bootstrap 假定行在container 内。有时 CMS 有自己的容器，然后您可以使用它们，但要重现问题，我们需要容器的正确代码。
看看你的截图，我敢假设你网站上的某些东西给所有图片添加了max-width: 100%;限制。这是针对不同主题的相当常见的解决方案。
我删除了带有 section padding-y 类的块，因为没有它，问题就重现了。
所以我们得到了一个重现您的屏幕截图的代码示例。
img
max-width: 100%;
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">第 2 步。发生了什么
4 个小图像比它们的列宽。总内容宽度为 1200 像素，六分之一宽度中的一列是 200 像素。此外，每列还具有 15 个像素的水平填充。 233 像素宽的图像还有 170 像素。
还有一些东西增加了图像最大宽度的限制。正因为如此，这些图像变得更小，它们的高度也变得更小。
第 3 步。可以做什么
由于我们不知道不同宽度屏幕的布局，我只能幻想。
假设你想将 5 张不同大小的图片在桌面上排成一行，使它们的高度一致。
带背景的变体
例如，您可以用块替换图像并将图像用作背景。然后可以在CSS中设置高度，图片之间的间距不变，但是图片的可见部分可以缩小。
.image-box
background-repeat: no-repeat;
height: 255px;
@media (min-width: 768px)
.image-box
background-position: center;
background-size: cover;
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="image-box" style="background-image:url(https://via.placeholder.com/348x255/69c/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">带有 flexbox 的变体
您还可以使 Bootstrap 3 列的行为类似于 flexbox。如果预先知道图像的大小并且您可以计算每个图像占据行的哪一部分，则此解决方案是合适的。
在您写的 cmets 中，您希望在移动设备上拉伸图像。所以我在新的解决方案中使用了这个信息。
.row-of-images img
width: 100%;
@media (min-width: 768px)
.row-of-images
display: flex;
.row-of-images > div
box-sizing: content-box;
/* images will be resized taking into account the padding of the columns */
flex: 1 1 18.203125%;
/* 18.203125% = 100% * 255px / (348px + 4 * 255px) */
.row-of-images > div:first-child
flex-basis: 27.1875%;
/* 27.1875% = 100% * 348px / (348px + 4 * 255px) */
<div class="container">
<div class="row row-of-images">
<div class="col-xs-12">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">【讨论】：
非常感谢您的精彩回答@Gleb - 我可以看到它正在做它的工作。我只是尝试像这样设置col-xs-12：<div class="col-sm-4 col-xs-12"> <a href="#"><img src="http://placehold.it/348x255" class="img-responsive"></a> </div> 如何使图像在移动设备上全宽？目前它的宽度与桌面上的宽度相同
@MK-DK .img-responsive 类仅限制图像的宽度。要将图像拉伸到列的整个宽度，请为其设置 CSS 属性 'width: 100%;。例如，您可以将自己的.row-with-images 类添加到具有.row 类的块中，并拉伸该行中的所有图片。 HTML：<div class="row row-with-images">...</div> CSS：.row-with-images img width: 100%;
所以实际上我用列创建的每一行新行都需要在它们上设置高度？我的胃里有东西，感觉不对劲。这是正确的方法吗？由于 SEO，我需要它们作为图像而不是背景图像
@MK-DK 这取决于您当前正在实施的解决方案。将您当前的代码添加到您的问题中，以明确您现在的位置。
@MK-DK 我在答案中添加了一个解决方案，它将 Bootstrap 3 列重新定义到弹性框中。【参考方案2】：
问题页面“（域）dot com slash da-dk/page/sbp”（但不在上面发布的源中）上的图像高度不同的原因是因为问题页面上的图像具有@987654322 @类：
<div class="row">
<div class="col-sm-4">
<a href="#"><img src="http://placehold.it/348x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/233x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/233x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/233x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/233x255" class="img-responsive"></a>
</div>
</div>
从Bootstrap 3.3 documentation，.img-responsive 适用：
max-width: 100%;、height: auto;和display: block;到图像，以便它很好地缩放到父元素。
第一张图片缩放到第一列的宽度，即col-sm-4。其他图像正在缩放到col-sm-2 列的宽度。所以很清楚为什么图像的高度不同。
最简单的解决方法是从所有图像中删除.img-responsive。
但是，如果您想让图片保持响应，则需要调整图片的纵横比，使较宽和较窄的图片最终具有相同的高度。 调整纵横比的示例：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<a href="#"><img src="http://placehold.it/348x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/153x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/153x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/153x255" class="img-responsive"></a>
</div>
<div class="col-sm-2">
<a href="#"><img src="http://placehold.it/153x255" class="img-responsive"></a>
</div>
</div>【讨论】：
嗯，我认为这是我应该走的路。但我不知道，你是如何达到 153px 的？ 190px 应该是正确的，但它们都不合适。结果和以前一样。 请查看 /sbp。这些列现在在大屏幕上对齐，但是当我降低到大约 1280 像素时，它们不再对齐。 @MK-DK 您必须调整尺寸以考虑包括填充在内的列宽。在图像开始缩小的屏幕宽度处，col-sm-2 为 188 像素宽，左右内边距各 15 像素。以上是关于将一排图像保持在相同的高度的主要内容，如果未能解决你的问题，请参考以下文章