css - img { 最大高度 : 100%; } causes img to exceed bounds

Question

这是 Chrome 的错误吗？

这是 HTML:

<div><img src="test.png"></div>

这是 CSS:

* { box-sizing: border-box; }
div { height: 200px; padding: 75px 0 60px; }
img { max-height: 100%; }

预期结果:img 的高度应为 65px。

Chrome 中的结果 (v. 27.0.1453.116) 在 Mac OS (v. 10.6.8) 上:img 的高度为 135px 并“渗入”到父 div 的填充。如果我将 div 的 padding 更改为 50px 0，奇怪的是它会正确呈现。

在 codepen 中玩这个:http://codepen.io/anon/pen/jhbKz

截图:

第一个 block 的填充为50px 0。第二个 block 的填充为75px 0 60px。

Firefox(正确结果)

Chrome(错误？)

Answer 1

尝试向您的图像添加一个宽度和高度为 100% 的容器。这将为您在 chrome 和 FF 上提供相同的输出。

<div class="b">
    <div style='height:100%;width:100%;'>
        <img src="some image url">
    </div>
</div>

我无法解释为什么此修复程序目前有效，但我自己正在尝试对其进行推理。