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

Question

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

<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;
}

设置 max-height 在 Chrome 中不起作用。图像被展平。在 Firefox 和 IE 中看起来还可以。但是，设置 max-width 在所有浏览器中都有效。

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

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

​</p>

Answer 1

有趣的是，Chrome 似乎并没有用“auto”覆盖固定宽度，尽管 Inspector 说它确实如此。

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