我想要一个图像来填充窗口大小/视口的宽度或高度。
为了更好地理解我正在尝试做什么，我在 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>