Google Chrome 中的最大宽度与最大高度

Question

我正在尝试根据容器高度仅使用 CSS 调整图像大小。这是代码和fiddle。

<div id="first">
<img src="http://www.helpinghomelesscats.com/images/cat1.jpg" width=360 height=360>  
</div>​

#first {
    height: 100px;
}
img {
    max-height: 100%;
    width: auto !important;
}

在 Chrome 中无法设置最大高度。图像被展平。在 Firefox 和 IE 中看起来还可以。 但是，设置 max-width 在所有浏览器中都有效。

#first {
    width: 100px;
}
img {
    max-width: 100%;
    height: auto !important;
}

有人可以告诉我，如何获得最大高度的正确结果，这也适用于 Chrome 吗？

​

Answer 1

有趣的是，Chrome 似乎并没有用“auto”覆盖固定宽度，尽管 Inspector 这么说。

最简单的解决方案是不指定图像的width 和height 属性。