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并查看相关评论。

Img内部的Flexbox响应问题

1 个答案: