保持固定高度的圖像寬高比

Question

我有一個高度爲600px的圖像。我使用的是一個img標籤，而不是背景圖片。原因是因爲響應。我希望圖像根據屏幕尺寸調整大小。但我希望我的圖像的高度爲300px。現在，如果我設置了max-height:300px和width:100%。圖像看起來很緊張。是否有一種方法可以根據屏幕尺寸調整圖像的比例以及響應速度？

這是一個自舉傳送帶圖像。

Answer 1

集width:auto;，像下面的例子：

img.non-stretched { 
 
    max-height:300px; 
 
    width:auto; 
 
} 
 
img.stretched { 
 
    max-height:300px; 
 
    width:100%; 
 
}

<img class="non-stretched" src="http://placehold.it/600x600"/> 
 
<img class="stretched" src="http://placehold.it/600x600"/>

的width初值爲auto，所以你可以刪除width財產。但在你的情況下設置width會更安全，因爲使用過的框架或其他樣式表可以用另一個值覆蓋規則。

您可以找到有關width財產這裏的更多信息： https://www.w3.org/TR/CSS2/visudet.html#the-width-property