HTML 使图像适合父级的父级

Question

我想在一些 div 中放置一个图像，并在不改变宽高比的情况下使其尽可能大。在图像及其父级上将 max-height 和 max-width 设置为 100% 不起作用并且图像溢出(我猜是因为父级实际上没有宽度或高度所以图像无法调整大小？)。

JSFiddle

<div class="block">
  <div class="row">
    <div class="col-xs-9">
      <div class="thumbnail">
        <img class="placeholder" src="https://unsplash.it/900/600" alt="">
      </div>
    </div>
    <div class="col-xs-3">
    </div>
  </div>
</div>

编辑:
今晚晚些时候，当我有时间写的时候，我会阐明我真正想要实现的目标。

Answer 1

将图像设置为 .thumbnail 的背景图像，并使用 background-size ( demo ) 限制其大小:

.thumbnail {
  display: inline-block;
  margin: 0;
  height: 100%;
  width: 100%;
  background: url("https://unsplash.it/900/600") no-repeat;
  background-size: contain;
}