css - img { 最大高度：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 (v. 10.6.8) 上的 Chrome (v. 27.0.1453.116) 中的结果img：高度为 135px 并且“渗入”到 parentdiv的填充中。如果我将 的 更改为padding，奇怪的是它会正确呈现。div50px 0

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

截图：

第一个块padding有50px 0. 第二块padding有75px 0 60px。

火狐（正确结果）

铬（错？）

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>

"table" 的另一个好处是 vertical-align: middle; 可用于将图像（或其他内容）垂直居中。