Chrome不按比例縮放

Question

我正在加載三張圖片。前兩個以他們的實際比例顯示。第三種是在CSS中使用高度聲明縮小的。它也被設置爲在兩個方向上填充其包含的div 100％（稍後需要調整大小功能）。

在Firefox中，這工作得很好。瀏覽器根據我聲明的高度加載圖像，並相應地縮放寬度，使div適合它。

在Chrome中，圖像正確加載其高度，但保持原始圖像的寬度，因此被拉伸。

有關使這項工作無需進行寬度聲明的建議？

.character-div { 
float: left; 
text-align:center 
} 
.drag img { 
    height:100%; 
    width:100%; 
} 
.h100 img { 
    height:100px 
} 

http://jsfiddle.net/dr9WZ/1/

Answer 1

添加自動寬度：

.h100 img { 
    width: auto; 
    height:100px 
}