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
}