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

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。

Mac OS上的

Chrome中的结果（版本27.0.1453.116）（v.10.6.8）：img的高度为135px，并且“渗透”到父{{ 1}}的填充。如果我将div的{​​{1}}更改为padding，奇怪的是它会正确呈现。

在 codepen ：http://codepen.io/anon/pen/jhbKz

中使用此功能

截图：

第一个块的div为50px 0。第二个块的padding为50px 0。

Firefox（正确结果）

Chrome（错误？）

Answer 1

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

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

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

Answer 2

几年后，问题似乎已经蔓延到Firefox。 Pav的解决方法对我不起作用，可能是因为我有“ a”而不是“ div”。在我的情况下，唯一的方法是显示为表格：

<div style="display: table;">
<a style="height: 100px; display: table-cell;" href="#">
    <img style="max-height: 100%; width: auto;" src="some image url">
</a></div>

“表格”的另一个好处是，垂直对齐：中间；可以用于使图像（或其他内容）垂直居中。