如何调整到适合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％，适用于手机浏览器等）