CSS保存圖像寬高比

Question

我有大小的一些圖形以英寸：

4.25 X 6.875
5.5×8.5
6×9
8.5×8.5
8.264 X 11.694

我想做一個減少預覽的圖形（我會迭代所有大小，我想顯示每個圖像在相同的，只有一個DIV），但我想保存高寬比。我想知道這將是該DIV的最佳尺寸，以避免每幅圖像變形。

Answer 1

如果設置在圖像上max-width和max-height，但不設置height或width，則圖像將被限制，同時保持縱橫比你所定義的大小。

實施例：

<img src="big_image.png" style="max-width: 100px; max-height: 100px;" /> 

如果big_image.png是4000到2000個像素，將它通過50

Answer 2

呈現爲100我的示例控制圖像由CSS的大小和DIV。 div設置爲自動，所以它會自行調整爲圖像的大小。 您可以一次性快速控制圖像的大小，而不是在html代碼中逐一調整它們。

http://jsfiddle.net/KzXFm/

HTML

<div id='container'> 
    <ul> 
    <li> 
    <img src="http://static.dezeen.com/uploads/2009/01/2-port-house-antwerp-by-zaha-hadid-architects-sqwu-2port-house_antwerp_02.jpg"> 
     </li> 
      <li> 
    <img src="http://static.dezeen.com/uploads/2009/01/2-port-house-antwerp-by-zaha-hadid-architects-sqwu-2port-house_antwerp_02.jpg"> 
     </li> 
      <li> 
    <img src="http://static.dezeen.com/uploads/2009/01/2-port-house-antwerp-by-zaha-hadid-architects-sqwu-2port-house_antwerp_02.jpg"> 
     </li> 
    </ul> 
</div> 

CSS

#container{ 
    max-width:auto; 
    max-height: auto; 
    background: red; 
} 

img { 
    max-width:20%; 
    max-height: 20%; 
}