Question

我正在网站项目上使用Bootstrap 3。我在使用img-responsive时遇到问题，使我的图像反应灵敏。

我想要的是在容器中并排放置4张图像，这些图像在屏幕尺寸变化时具有相同的高度和比例。

在Bootstrap网格系统之后，我的图像共有12列。

1 =最左侧图像2 =第二图像3 =左侧第三图像4 =最右侧图像

1 - 3 cols，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;
}

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

Answer 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

如何使响应式图像在扩展时保持相同的高度？

2 个答案: