flex-item 中的图像在 chrome 和 firefox 中忽略 max-height:100% -（在 safari 中有效）

Question

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

为了更好地理解我正在尝试做什么，我在 codepen 上创建了一个示例- 请查看并调整预览大小。它在 safari 中运行良好，但 chrome 和 firefox 似乎有问题。图像忽略 max-height 属性并溢出 flex-item 尺寸。

有什么建议可以在 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

问题是图像和它的包含块都有

max-height: 100%;

相反，删除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。

要解决这个问题，您可以使用未知技术（或 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>