保持图像行在同一高度

Question

我正在使用 Bootstrap 3 网格（不幸的是，CMS 不允许我使用 Bootstrap 4）。目前我无法link访问该页面，所以可能这个问题太难回答了。

以下是包含 5 列的行在 CMS 中的显示方式：

max-width 是 1200px。

问题是每次我添加包含图像的列时，图像高度都不一样。在这个例子中，我将所有图像的高度设置为 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>

Answer 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。如果事先知道图像的大小并且您可以计算每个图像占据行的哪一部分，则此解决方案是合适的。

在您写的评论中，您希望在移动设备上拉伸图像。所以我在新的解决方案中使用了这个信息。

.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">

Answer 2

问题页面“（域）.com 斜杠 da-dk/page/sbp”（但不在上面发布的来源中）图像高度不同的原因是因为问题页面上的图像有 .img-responsive class:

<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; and display: block; to the image so that it scales nicely to the parent element.

第一张图片正在缩放至第一列的宽度，即 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>

保持图像行在同一高度

Keep row of images at same height

html

css

twitter-bootstrap-3

第 1 步。让我们重现问题

第 2 步。发生了什么

第 3 步。可以做什么

有背景的变体

带有 flexbox 的变体