如何調整到適合img標籤？

Question

我想在小窗口中顯示圖像，但我需要保存圖像的比例（我仍然希望人們可以知道它是什麼）。 例如可以說圖像是1000X200像素，並且有一個div定義爲： height：100px; width：100px; 所以我想，圖像的毅力寫出這樣的：

<img src="asd.jpg" height=20 width=100 /> 

，而不是

<img src="asd.jpg" height=100 width=100 /> 

或不

<img src="asd.jpg"/> 

，然後有滾動..

我可以工作與百分比，但我怎麼做...（並且它甚至單獨工作百分比？）

Answer 1

如果設置max-height和CSS max-width，現代的瀏覽器將其限制在該尺寸，但保持寬高比是否正確：

<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" /> 

Answer 2

如果使用JavaScript，你可以簡單地得到的高度和寬度圖像並將其中一個除以獲得比率，然後將div的高度和寬度與該比率相乘，然後將img尺寸設置爲這些數字。

很明顯，這是一個非常簡單的方式來說，但我也不確定你是否想要使用JS或使用嚴格的CSS解決方案。

Answer 3

如果你的父母div有一套width和height，您可以設置的最大寬度和最大高度的img到100%：

div { 
    width: 100px; 
    height: 100px; 
} 
div > img { 
    max-width: 100%; 
    max-height: 100%; 
} 

（它總是一個很好的做法，讓圖像MAX-寬度爲100％，適用於手機瀏覽器等）