css - flex 元素内的图像忽略最大高度 :100% in chrome and firefox - (works in safari)

Question

我想要一个图像来填充窗口大小/视口(viewport)的宽度或高度。

为了更好地理解我正在尝试做的事情，i’ve created an example on codepen - 请查看并调整预览大小。 它在 safari 中运行良好 但 chrome 和 firefox 似乎有问题。图像忽略最大高度属性并溢出 flex 元素尺寸。

有什么建议可以在 chrome 和 firefox 中运行吗？

html,
body {
  height: 100%;
}
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: green;
}
.flex-item {
  max-width: 100%;
  max-height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="http://i.stack.imgur.com/mrEyQ.jpg">
  </div>
</div>

Answer 1

问题是图像及其包含 block 都有

max-height: 100%;

相反，删除包含 block 的 max:

.flex-item {
    width: 100%;
    height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
}
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: green;
}
.flex-item {
  width: 100%;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="http://i.stack.imgur.com/mrEyQ.jpg">
  </div>
</div>

但是，请注意 .flex-item 将在 .flex-container 中居中，但图像不会在 .flex-item 中居中。

要解决这个问题，您可以使用 centering in the unknown技术(或者 flexbox)。

html,
body {
  height: 100%;
  margin: 0;
}
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: green;
}
.flex-item {
  width: 100%;
  height: 100%;
  text-align: center;
}
.flex-item:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="http://i.stack.imgur.com/mrEyQ.jpg">
  </div>
</div>