使用JavaScript调整图像大小，然后将它们分配给img标签

Question

我在HTML和CSS开发方面非常新手。

我有一个带有标签的HTML页面。此标签将保存一些图片，这些图片具有不同的大小。我使用CSS为标签设置了宽度和高度。

所有图片将使用JavaScript显示。

在分配图像给标签之前，我是否需要使用JavaScript调整图像大小？ 也许不需要这样做，因为我已经使用CSS设置了大小。比例将被限制吗？

对我的英语表示抱歉。

- VansFannel

Answer 1

您需要在服务器端完成此任务，使用管理脚本。您可以在上传时创建原始图像的版本，然后HTML/CSS侧可以安全地使用这些图像。

这不是客户端要做的任务。基本上，您在这里做的是下载一个大图像（大量数据），然后将其减少以创建一个较小的图像。因此，您浪费了客户端和服务器的带宽。

如果绝对没有其他可能性，并且您有一个固定的区域，比如640x480，则可以通过保持以下纵横比来实现基本裁剪：

HTML：

<div id="wrapper"><img src="my.jpg"></div>

CSS：

#wrapper {
    width: 640px;
    height: 480px;
    line-height: 480px;
}

#wrapper img {
    width: 640px;
}

- vbence

---

最好确实在服务器上进行此操作。发送大图并让客户端显示小图是一种浪费。如果您在服务器上调整大小，可以缓存已调整大小的图像，并且需要发送图像的带宽更少。这两者都是性能提升。 - GolezTrol

这是一个对于任何想要这样做的人都有用的好建议。但我将在WebWorks Playbook应用中使用它。 - VansFannel

Answer 2

如果你使用CSS设置了高度和宽度，那么纵横比就不会保持一致。但是，如果你在html的img标签中指定任何一个属性，则纵横比将会保持一致。

- Sujit Agarwal

---

谢谢您的回答。在将图像分配给IMG标签之前，我该如何调整图像大小？ - VansFannel

您想保持纵横比吗？如果是，那么您希望固定哪个尺寸？高度还是宽度？ - Sujit Agarwal

@Coding-Freak：我有一个大小为（260，260）的img标签。我必须适应任何图像在此大小下保持纵横比。 - VansFannel

然后您需要计算高度和宽度中的较大值，如果高度大于宽度，则仅将img标签的属性分配为高度，并赋值为260，反之亦然。 - Sujit Agarwal

JQuery 不是万能的解决方案。你必须仔细考虑是否将其引入到你的工具链中。 - vbence

@vansfannel：如果确实值得纠正，那请把打勾标记回来。 - Sujit Agarwal