流体高度图像：Chrome＆amp; Safari bug

Question

我的容器绝对位于屏幕的顶部和底部。

容器中的图像被缩放以填充高度，宽度应该是成比例的。

图像是内嵌设置的，容器有空格：nowrap以确保元素成一排。 CSS如下：

section {position:absolute; top:100px; bottom:100px; font-size:0; left: 0; white-space: nowrap;}
section img {width:auto; height:100%; display:inline;}

这可以在Firefox，Chrome和Safari中按预期工作，直到调整浏览器大小。调整大小后，图像适合高度，宽度保持不变。

请在此处查看我的简化测试用例： http://codepen.io/anon/pen/Beasx/

有什么想法吗？

Answer 1

http://codepen.io/anon/pen/BtyeG/

要修复Chrome中扭曲的图像大小调整，我将其缩小到这个：

section img {
  max-width:100%;
}