使用javascript调整图像大小，然后将其分配给img标记

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;
}