img上的最小高度不變形

Question

有沒有辦法將圖像的最小高度不扭曲呢？

例如：

min-height: 500px 

但不扭曲它，我創建一個電子商務和我有圖像由員工上傳的一個問題。

我想增加高寬比設置只有最小高度。

Answer 1

您可以使用max-sizes控制圖像的高度和寬度，然後將寬度和高度屬性設置爲自動。

img { 
    display: block; 
    max-width:800px; 
    max-height:500px; 
    width: auto; 
    height: auto; 
} 

這將調整圖像的保持寬高比而不會大於聲明的大小。

你也可以定義最小高度的關鍵是設定寬度，高度自動保持寬高比