Chrome中的比例图像大小调整

Question

我正在尝试使用此CSS规则以65％的原始尺寸显示几张图片：

div#midline .artistEntry img {
    height: 65%;
    width: 65%;
}

它似乎在IE和Firefox中运行良好

但在Chrome中看起来很糟糕。看起来图像的宽度已经正确缩小，但实际上已经扩大了高度。

有没有办法使用适用于所有现代浏览器的CSS按比例调整图像大小？如果没有，我（不情愿地）考虑一个JavaScript / jQuery解决方案

Answer 1

#midline .artistEntry img {
    height : auto;
    width  : 65%;
}

将其中一个维度设置为auto（这是默认值）应该保持纵横比不变，同时将另一个维度拉伸到其父项维度的百分比。

这是一个演示：http://jsfiddle.net/Mu6h7/（重新调整预览面板大小以查看宽高比保持不变）

Answer 2

删除高度或宽度规则。通过定义高度和宽度，它将抓取这两个，如果你删除它，它将正确缩放。