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

Question

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

我有一个带有 img 标记的 HTML 页面。该标签将保存一些图像。这些图像具有不同的尺寸。我使用 CSS 设置了 img 标签的宽度和高度。

所有图像都将使用 JavaScript 显示。

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

对不起我的英语。

Answer 1

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

Answer 2

您应该在服务器端执行此操作。带有管理脚本。您可以在上传原始图像时创建原始图像的版本，然后这些图像可以被 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;
}