谷歌浏览器中的最大宽度与最大高度

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

设置max-height在Chrome中不起作用。图像变平。在Firefox和IE中它看起来不错。 但是，设置最大宽度适用于所有浏览器。

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

有人可以告诉我，如何达到最大高度的正确结果，这也将在Chrome中工作？

Answer 1

有趣的是，Chrome浏览器似乎并没有被覆盖使用“自动”固定宽度，即使督察说，它的作用。

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