用CSS縮小圖像以適應容器

Question

所以我想用css縮小圖像到容器的大小，同時保持其縱橫比。指定最小高度或寬度時，似乎很容易達到此目的，但不能同時滿足這兩個要求。有任何想法嗎？

Answer 1

找出高度較小或寬度較小;無論哪個維度較小，請設置img的屬性，但不能設置其他屬性。假設您未在CSS中設置img的大小，則應該在容器的約束範圍內儘可能使圖像儘可能大，同時保持高寬比。此代碼假定您的容器是div。

var height = $('#divImg').Height(); 
var width = $('#divImg').Width(); 

if (height > width) 
{ 
    $('#divImg img').Width(width); 
} 
else 
{ 
    $('#divImg img').Height(height); 
} 

編輯：

如果你不使用jQuery，您可以使用下面的CSS技巧，以保持縱橫比。更改100px要將容器的大小：

#divImg img { 
    height: 100px; 
    width: auto; 
} 
#divImg img { 
    height: auto; 
    width: 100px; 
} 

從CSS styling image height and width while maintaining aspect ratio借來的。