css - Bootstrap 列内的响应图像高度

Question

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

https://codepen.io/anon/pen/vmZKyM

<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%；