如何让响应式图像在缩放时保持相同的高度？答案

【问题标题】：How do I get responsive images to stay equivalent heights as they scale?如何让响应式图像在缩放时保持相同的高度？
【发布时间】：2014-05-09 12:27:08
【问题描述】：

我现在在一个网站项目中使用 Bootstrap 3。我在使用 img-responsive 使我的图像具有响应性时遇到问题。

我想要的是在一个容器中并排放置 4 张图像，它们的高度和比例都相同，随着屏幕尺寸的变化。

按照 Bootstrap 网格系统，我的图像总共占据了 12 列。

1 = 最左边的图像 2 = 第二个图像 3 = 从左数第三个图像 4 = 最右边的图像

1 - 3 列，960x640 2 = 2 列，640x640 3 = 4 列，1280x640 4 = 3 列，960x640

HTML：

<div class="container">
 <div class="row">
  <div class="col-md-3">
    <img class="responsive" src="/image/1.jpg" />
  </div>
  <div class="col-md-2">
    <img class="responsive" src="/image/2.jpg" />
  </div>
  <div class="col-md-4">
    <img class="responsive" src="/image/3.jpg" />
  </div>
  <div class="col-md-3">
    <img class="responsive" src="/image/4.jpg" />
  </div>
</div>

如何确保它们在缩放时都具有相同的高度？现在所有的图片都简单地将 img-responsive 作为一个类，使其最大宽度为 100%，高度设置为自动，并显示为块。

CSS：

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

【问题讨论】：

你能提到原始图像尺寸吗？也许不同的列大小与相同高度的图像宽度不成比例。最好的方法是为图像提供成比例的宽度和高度：自动
@Sagi_Avinash_Varma 是的，我刚刚添加了这些！我认为这实际上可能是问题所在......
这个网站真的很有帮助。 helloerik.com/…
如果您不关心 IEgithub.com/twbs/bootstrap/pull/13203

标签： css image twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在解决另一个问题时想到另一种更简单的方法......只需通过添加自定义类来覆盖 col-md-* 填充。无需媒体查询。

示例：http://www.bootply.com/utGXpeBgE2

HTML

<div class="col-md-2 no-pad">
  <img ...

CSS

.no-pad{
  padding-left:0px;
  padding-right:0px;
}

【讨论】：

【解决方案2】：

当图像的宽度受到下一张图像的限制时，您的图像不会以全高显示。您需要添加position:absolute 来解决这个问题。但是，当屏幕低于 col-md 阈值（992px）时会导致问题，所以只有在高于它时才添加它，通过@media 查询

@media(min-width:992px){
  .img-responsive{
      position:absolute;
  }
}

HTML

  <div class="col-md-3">
    <img class="img-responsive" src="//placehold.it/960x640/eee">
   </div>

  <div class="col-md-2">
    <img class="img-responsive" src="//placehold.it/640x640/ddd">
    </div>

   <div class="col-md-4">
     <img class="img-responsive" src="//placehold.it/1280x640/eee">
   </div>

   <div class="col-md-3">
     <img class="img-responsive" src="//placehold.it/960x640/ddd">
   </div>

查看示例：http://www.bootply.com/11BDvXAx9y

【讨论】：