javascript - 在 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(默认设置)应该保持纵横比不变，同时将另一个维度拉伸(stretch)到其父维度的一定百分比。

这是一个演示:http://jsfiddle.net/Mu6h7/ (调整预览面板的大小以查看纵横比保持不变)