css - 流体高度图像 : Chrome & Safari bug

Question

我有一个绝对定位在屏幕顶部和底部的容器。

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

图像设置为内联，容器有 white-space: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/

为了修复在 Chome 中调整图像大小时出现的失真问题，我将其缩小为:

section img {
  max-width:100%;
}