Question

我正在尝试在最里面设置两个带有居中图像的嵌套柔印箱，它始终适合其容器，同时保持其比例，而不会被拉伸。图像配有：

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

看看这里： https://jsfiddle.net/quz4zgb0/2/

此处宽度正确缩放，但一旦容器变得太小，高度就会被拉伸。我该如何防止这种情况？

提前致谢！雅克

Answer 1

默认情况下，flexbox子项的flex-shrink值为1，这意味着，如果需要，子项将缩小以适合所需的值。

通过向flex-shrink: 0元素添加.image-container，您可以看到它现在可以正确且统一地进行扩展。

Answer 2

将object-fit: contain;和flex-shrink: 0;应用于<img>会让您非常接近您想要的内容。

Answer 3

浏览器仍然存在图像和flex父级的麻烦。

Firefox没有我见过的错误，Chrome确实存在，IE 11更糟糕。

虽然它们尚未贯穿所有这些，但你可以在这里使用绝对定位：

.image-container{
  height: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
}

.image-container img{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  max-height:100%;
  max-width: 100%;
}

.main-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header,
.footer {
  width: 100%;
  height: 1em;
  background-color: red;
}
.image-container {
  height: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.image-container img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}

<div class="main-container">
  <div class="header">header</div>
  <div class="image-container">
    <img src="http://weknownyourdreamz.com/images/circle/circle-08.jpg" />
  </div>
  <div class="footer">footer</div>
</div>

https://jsfiddle.net/quz4zgb0/3/

嵌套的Flexbox延伸图像

3 个答案: