Question

我想在小窗口中显示图像，但我需要节省图像的比例（我仍然希望人们可以知道它是什么）。例如，假设图像是1000X200像素，并且有一个div定义为：身高：100px; 宽度：100px; 所以我希望图像会这样写：

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

而不是

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

是不是

<img src="asd.jpg"/>

然后有滚动..

我可以使用百分比，但我该怎么做..（它甚至可以单独使用百分比吗？）

Answer 1

如果您在CSS中设置max-height和max-width，现代浏览器会将其限制为该大小，但保持宽高比正确：

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

Answer 2

如果您的父div设置了width和height，则可以将img的最大宽度和最大高度设置为100% ：

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

（对于移动浏览器等，图片最大宽度为100％总是一个好习惯。）

Answer 3

如果你使用javascript，你可以简单地得到图像的高度和宽度，然后除以另一个得到一个比率，然后将div的高度和宽度乘以该比率，然后将img维度设置为那些号。

显然，这是一种非常简单的说法，但我也不确定你是想用JS做这个还是使用严格的CSS解决方案。