Question

我不知道为什么这是一场如此艰难的斗争。我想在容器中放置一个图像。该图像应该是响应的，这意味着当列的宽度变小时，图像也应该变小。它现在就这样做，但它保持高度，这意味着它看起来会拉长。

<div class="container-fluid">
  <div class="col-md-8 offset-md-2">
    <div class="row">
      <div class="col-md-4 offset-md-2">
        <div class="row">
          <p>Left column</p>
          <img src="http://placehold.it/600x400" />
        </div>
      </div>
      <div class="col-md-5 offset-md-1">
        <div class="row">
          <p>Right column</p>
          <img src="http://placehold.it/700x400" />
        </div>
      </div>
    </div>
  </div>
</div>

我不知道图像的纵横比（在这种情况下我是这样做的），所以我无法通过padding-bottom技巧（通常用于图像）实现这一点。

我怎样才能做到这一点？

Answer 1

将max-width: 100%;更改为width: 100%;也将height: auto;更改为height: 100%;

Answer 2

如果容器应该有一个固定的高度，那么给它一个ID（或类）并以相反的方式改变.img响应限制，例如

.container {
height: 600px;
}


/*And then change */
.container .img-responsive {
display: block;
height: auto;
max-width: 100%;
}  

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

不知道如何使用混合方向，但如果它们浮动它真的不重要

Bootstrap列内的响应图像高度

2 个答案: