img {max-height：100％;导致img超出边界

Is this a Chrome bug?

这是Chrome的错误吗？

Here's the HTML:

这是HTML：

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

Here's the CSS:

这是CSS：

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

Expected result: The img should have a height of 65px.

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

Result in Chrome (v. 27.0.1453.116) on Mac OS (v. 10.6.8): The img has height of 135px and "bleeds" into the parent div's padding. If I change the padding of the div to 50px 0, oddly it renders properly.

在Mac OS上的Chrome（v.27.0.1453.116）中的结果（v.10.6.8）：img的高度为135px，并且“渗透”到父div的填充中。如果我将div的填充更改为50px 0，奇怪的是它会正确渲染。

Play with this in a codepen: http://codepen.io/anon/pen/jhbKz

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

Screenshots:

截图：

First block has padding of 50px 0. Second block has padding of 75px 0 60px.

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

Firefox (correct result)

Firefox（正确的结果）

Chrome (wrong?)

Chrome（错了吗？）

1 个解决方案

#1

Try adding a container to your Image with width and height of 100%. This will give you the same output on chrome and FF.

尝试在图像中添加容器，宽度和高度均为100％。这将在chrome和FF上为您提供相同的输出。

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

I cannot explain why this fix works currently, but I myself am trying to reason with it.

我无法解释为什么这个修复目前有效，但我自己正试图用它推理。