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 
}