如何调整图像大小但保持 HTML 中的方面？答案

【问题标题】：How can I resize an image but keep the aspect in HTML?如何调整图像大小但保持 HTML 中的方面？
【发布时间】：2013-12-04 09:45:26
【问题描述】：

当我使用它时，它会填满盒子并失去比例：

<img src="test.jpg" width="120" height="120" border="0">

当我使用这个时，图像可能太高了：

<img src="test.jpg" width="120" border="0">

当我使用它时，图像可能会太宽：

<img src="test.jpg" height="120" border="0">

有没有一种方法可以将图像的尺寸变为 120x120 尺寸，同时仍然保持纵横比而不拉伸宽度或高度？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

除非您裁剪图像或将其调整为具有相同纵横比的分辨率，否则无法保持纵横比。

您可以使用 php 的 GD 库来处理图像并尝试根据自己的喜好对其进行修改。在网上搜索有关如何执行此操作以及如何使用 GD 库的示例。

【讨论】：

【解决方案2】：

我认为这是最好的方法？如果我错了，请纠正我...

<img style="max-width: 120px; max-height: 120px;" src="test.jpg" border="0">

【讨论】：

【解决方案3】：

您可以使用 CSS 将高度设置为自动：

<img src="test.jpg" style="width:120px; height: auto;" />

这样，它将适合 120 像素 X 120 像素的框，但它不会像这样填充空间，但会适合其中。

【讨论】：

【解决方案4】：

要调整图像大小，请查看以下内容：

这应该指向您想要实现的目标。

【讨论】：