如何将大小调整为适当的 img 标签？

Posted 2023-03-05

【中文标题】如何将大小调整为适当的 img 标签？

【英文标题】：How to resize to the img tag appropriate?

【发布时间】：2011-08-10 13:17:12

【问题描述】：

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

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

而不是

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

还是不

<img src="asd.jpg"/>

然后是卷轴..

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

【参考方案1】：

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

div 
  width: 100px;
  height: 100px;

div > img 
  max-width: 100%;
  max-height: 100%;

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

【讨论】：

这不会保留图像的纵横比，这是问题所要求的。

【参考方案2】：

如果您使用 javascript，您可以简单地获取图像的高度和宽度，然后将一个除以另一个得到一个比率，然后将 div 的高度和宽度与该比率相乘，然后将 img 尺寸设置为那些数字。

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

【讨论】：

问题是我试图避免 js。

如果您愿意使用 max-width 和 max-height ，那无论如何都是更好的解决方案。

【参考方案3】：

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

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

【讨论】：

你能告诉我支持的浏览器吗？这看起来和我需要的完全一样。

@user719001 应该适用于任何 IE7+。请参阅w3schools.com/Css/pr_dim_max-height.asp 如果您需要 IE6，您将进入一个充满伤害的世界：\