您如何防止图像扩展到其容器之外？

Question

我有一个高度大于它的容器的图像。图像设置为 max-height: 100% 和 max-width: 100% 但它继续增长超出它的包含元素（高度 - 令人惊讶的是不是宽度）

如何在保持纵横比的同时防止它扩展到容器之外？

http://codepen.io/navarr/pen/zxZjjP提供了一个示例，该示例中的代码如下：

HTML：

.row {
  display: flex;
  .col {
    display: block;
    border: 1px solid blue;
    width: 50px;
    height: 400px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    .link {
      flex: 1 1 auto;
      img {
        max-height: 100%;
        max-width: 100%;
      }
    }
    h3 {
      flex: 0 0 auto;
      background: green;
    }
  }
}

<div class="row">
  <div class="col">
    <div class="link">
      <img src="http://i.imgur.com/qG6NmU7.png" />
    </div>
    <h3>100 x 800 image</h3>
  </div>
  <div class="col">
    <div class="link">
      <img src="http://i.imgur.com/EjltysP.png" />
    </div>
    <h3>800 x 100 image</h3>
  </div>
  <div class="col">
    <div class="link">
      <img src="http://i.imgur.com/zJlunbp.jpg" />
    </div>
    <h3>800 x 100 image</h3>
  </div>
  <div class="col"></div>
</div>

第一个框说明了问题：图像扩展到其包含元素之外。

第二个和第三个框显示这不是问题，只要图像宽度大于高度。

Answer 1

添加height: 100%;到图像的父级：

.link {
  flex: 1 1 auto;
  height: 100%;

  img {
    max-height: 100%;
    max-width: 100%;
  }
}

演示