強制css以比例方式顯示圖像

Question

imax是div元素。

#imax { 
width:222px; 
height:222px; 
} 
#imax img { 
width:222px; 
height:auto; 
} 

如果無論哪種方式我試圖在寬度或高度自動，不同方向的圖像將導致任一規模的扭曲。我如何修復顯示比例方面？

Answer 1

不能用CSS來完成。

您可以使用Javascript來做到這一點：獲得全尺寸圖像的高度或寬度，然後計算出正確的較小尺寸。

Answer 2

離開了高度：

#imax img { 
    width:222px; 
} 

，瀏覽器將採取的縱橫比計算的護理。

Answer 3

由於您對其父項進行了限制，因此圖像會失真。如果您只指定了其中一個尺寸屬性，另一個應根據比例進行縮放 - 除非受到其容器的限制/影響。如果在容器上使用了最大高度/寬度，可能會有不同的工作方式