Question

我的图像高度大于它的容器高度。图像设置为最大高度：100％和最大宽度：100％但它继续增长超出它的元素（高度 - 令人惊讶的不是宽度）

如何防止它扩展到容器之外，同时保持其宽高比？

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

HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

第一个框说明了问题：图像扩展超出它的元素。

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

Answer 1

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

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

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

<强> demo

Answer 2

在css中将宽度和高度设置为.link。

检查已编辑的代码集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

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

Background-size:contain;

这将允许图像保持其纵横比，但尽可能地填充div的整个空间。

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

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

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

3 个答案: