設置圖片高度，但限制圖片尺寸的寬度

Question

我希望我的img的高度爲18em，但是當網站在移動視圖中加載時，我希望img儘可能高，但沒有超過寬度的img ：100％。

什麼是img的CSS代碼？

我當前的代碼是：

.img{ 
 
    height: 18em; 
 
    max-width: 100%; 
 
}

但在移動視圖，高度和圖像的寬度加載時不互相成比例。身高保持在18em，寬度收縮至100％。 我想要圖像比例尺有100％的寬度。

我知道這是一個簡單的問題，但我不能讓它工作。我使用比例爲16：9和1：1的圖像，所以我總是遇到問題... 有人可以幫助我嗎？

Answer 1

您可以在移動視圖中使用height:auto

@media screen and (min-width: 480px) { 
    .img { 
     height: auto; 
     max-width: 100%; 
    } 
} 

Answer 2

使用媒體屏幕上首先檢查手機的尺寸，並且可以設置您的移動版本的CSS到媒體屏幕區域

@media screen and (min-width: 480px) { 
    .img{ 
     height: 9em; 
     max-width: 100%; 
    } 
} 

Answer 3

是否與max-height更換height做的伎倆？

如果不是，則應該使用一些媒體查詢來增強移動視圖和桌面視圖的ux。