比例圖像在Chrome

Question

調整

我想嘗試使用這個CSS規則的原始大小的65％，顯示了幾個圖片：

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

似乎在IE和Firefox

做工精細

但是在Chrome中它看起來很糟糕。看起來圖像的寬度已被正確減小，但高度實際上已經擴大了。

有沒有辦法按比例調整使用CSS，在所有現代瀏覽器上運行的圖像？如果沒有，我會（relucantly）考慮一個JavaScript/jQuery的解決方案

Answer 1

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

設置尺寸之一auto（這是默認值）應該保持長寬比不變，同時拉伸另一維度的百分比這是父母的維度。

這裏是一個演示：http://jsfiddle.net/Mu6h7/（重新尺寸預覽面板看的縱橫比保持不變）

Answer 2

除去的高度或寬度的規則。通過定義高度和寬度，它將抓住這兩個，如果你刪除一個，它會正確縮放。