css - 如何让响应图像在缩放时保持相同的高度？

Question

我现在正在网站元素中使用 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%，高度设置为自动，并显示为 block 。

CSS:

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

Answer 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;
}