如何调整 img 标签的大小？

Question

我想在小窗口中显示一张图片，但我需要保持图片的比例（仍然希望人们能够知道它是什么）。 例如，假设图像大小为1000x200像素，并且有一个定义为： 高度：100px; 宽度：100px; 因此，我希望图片按照以下方式显示：

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

而不是

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

是否

<img src="asd.jpg"/>

还有滚动条的问题...

我可以使用百分比来工作，但如何实现呢？（仅使用百分比是否可行？）

- Nir

Answer 1

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

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

- David Fullerton

---

你能告诉我支持的浏览器吗？看起来正是我需要的。 - Nir

@user719001 适用于IE7+的任何情况。请参阅 http://www.w3schools.com/Css/pr_dim_max-height.asp 如果您需要IE6，那么您会痛苦不堪：\ - David Fullerton

Answer 2

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

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

（对于移动浏览器等，将图像的最大宽度设为100%是一个好习惯。）

- Rudie

---

这样做无法保持图像的长宽比，而这正是问题所要求的。 - nickh

Answer 3

如果您使用JavaScript，只需获取图像的高度和宽度，并将一个数除以另一个数以获得比例，然后乘以 div 的高度和宽度与该比例，然后将img的尺寸设置为这些数字即可。
显然，这只是一个非常简单的说法，但我也不确定您是否想使用JS来完成此操作或使用严格的CSS解决方案。

- Munzilla

---

我想避免使用 JavaScript。 - Nir

如果你愿意使用max-width和max-height，那么这是更好的解决方案。 - Munzilla