你如何防止图像扩展到它的容器之外？

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

demo

Answer 2

在 css.

中将宽度和高度设置为 .link

检查编辑的codepen http://codepen.io/anon/pen/azJGrK

CSS

    .link {
      flex: 1 1 auto; 
      width: 100%; 
      height: 80%;
     img {
        max-height: 100%;
        max-width: 100%;
      }

Answer 3

用 div 替换 img 标签并将图像设置为背景图像，并将其添加到样式中：

Background-size:contain;

这将使图像保持其纵横比，但尽可能填满 div 的整个 space。

您也可以尝试background-size:cover;，看看哪个更符合您的需求。

请记住，在使用背景图片时，您需要包含 div 的高度和宽度。

Answer 4

使用与 the answer here 相同的思路，您可以尝试在图像父级上设置：

height: 0;
min-height: 100%;

并且在 img 本身上，设置：

height: 100%;

你如何防止图像扩展到它的容器之外？

How do you prevent an image from expanding beyond it's container?

css

flexbox