在将图像分配给 img 标签之前使用 javascript 调整图像大小

Posted 2023-03-05

【中文标题】在将图像分配给 img 标签之前使用 javascript 调整图像大小

【英文标题】：Resize images with javascript before assign them to an img tag

【发布时间】：2011-09-04 05:58:44

【问题描述】：

我对 html 和 CSS 开发非常陌生。

我有一个带有 img 标签的 HTML 页面。该标签将包含一些图像。这些图像有不同的大小。我使用 CSS 为 img 标签设置了宽度和高度。

所有图片都将使用 javascript 显示。

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

对不起我的英语。

【参考方案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;

【讨论】：

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

这对任何想要这样做的人来说都是一个很好的建议。但我将在 WebWorks Playbook 应用程序上使用它。

【参考方案2】：

如果您使用 css 设置了高度和宽度，则不会保持纵横比。但是，如果您使用 html img 标签指定任何一个属性，则将保持纵横比。

【讨论】：

感谢您的回答。如何在将图像分配给IMG 标签之前调整其大小？

要保持纵横比吗？如果是，那么您希望解决什么问题？高度还是宽度？

@Coding-Freak：我有一个 img 标签大小 = (260, 260)。我必须适应这种尺寸的任何图像保持纵横比。

那么你需要计算高和宽的较大值，如果高大于宽，则给img标签分配height的属性，只有260的值，反之反之亦然。

JQuery 不是灵丹妙药。您必须仔细考虑是否将其带入您的工具链。