比例图像在Chrome

2012-02-20 62 views 0 likes

调整

我想尝试使用这个CSS规则的原始大小的65％，显示了几个图片：比例图像在Chrome

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

似乎在IE和Firefox

做工精细

enter image description here

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

enter image description here

有没有办法按比例调整使用CSS，在所有现代浏览器上运行的图像？如果没有，我会（relucantly）考虑一个JavaScript/jQuery的解决方案

2012-02-20 Dónal

@ hunter - 因为他问真的很难的问题=）。不，在Chrome中，65％的高度似乎是容器的高度，而不是图像。 – mrtsherman 2012-02-20 17:46:08

尝试仅设置width属性。 – j08691 2012-02-20 17:43:23

回答

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

设置尺寸之一auto（这是默认值）应该保持长宽比不变，同时拉伸另一维度的百分比这是父母的维度。

这里是一个演示：http://jsfiddle.net/Mu6h7/（重新尺寸预览面板看的纵横比保持不变）

2012-02-20 17:42:54 Jasper

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

2012-02-20 17:43:51