Flexbox 响应问题中的图像

Question

我有一个带有flex div 的代码片段，里面有一个img：

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

<div class="container">
  <img src="http://i.stack.imgur.com/aHBI2.png" class="item">
</div>

在 Chrome 和 IE 上，当我垂直调整窗口大小时，图像仅在垂直方向上响应。宽度不与高度成比例变化（在这种情况下减少）。在 Firefox 上一切正常。

你知道这个问题吗？

http://jsfiddle.net/z2v9o9ew/1/

Answer 1

如果容器要占据整个屏幕大小，您可以使用viewports units。并且不要忘记为 html 和 body 标签设置height。

http://jsfiddle.net/hsn43uzq/

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

<div class="container">
    <img src="http://dummyimage.com/500" class="item" />
</div>

作为一种解决方法，您可以删除 flex，并使用 css transform 使图像居中。

http://jsfiddle.net/5k84mfft/

html, body {
    height: 100%;
    margin: 0;
}
.container {
    width: 100%;
    height: 100%;
    background: black;
    position: relative;
}
.item {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="container">
    <img src="http://dummyimage.com/500" class="item" />
</div>

编辑：问题也可以通过简单地按照 OP 的建议添加来解决，尽管我们不知道它为什么会起作用。

flex-direction: column;

Updated demo 并查看下方的相关 cmets。