javascript - 如何设置图像宽度/高度

Question

我有我认为非常简单的代码，我希望它能够修改 img 宽度/高度，但它不起作用。

我使用createObjectURL，然后获取该图像的宽度/高度。然后，我将计算宽度/高度，以便我可以以适当的比例创建缩略图(不扭曲原始图像，而只是使其变小)。目前，我只是对值进行硬编码以查看其是否有效，但事实并非如此。

然后，我使用新值加载图像。

但它不会改变我在CSS中为img设置的原始高度/宽度。

fiddle 在这里:

一如既往地感谢所有帮助。下面是相关的代码块。 id="fileDisplay"是容器。背景 url 将是“正在加载”图像。 id="imgDisaply"是加载图像的 img 组件，它覆盖了“加载”背景。这是我能够弄清楚如何在图像加载时向用户提供“正在加载”图像作为反馈的唯一方法。

imgSrc = window.URL.createObjectURL(this.files[0]);
getImgSize(imgSrc);
document.getElementById("imgDisplay" + justNumber).width="500";
document.getElementById("imgDisplay" + justNumber).height="200";
document.getElementById("imgDisplay" + justNumber).src = imgSrc;

Answer 1

在 DOM 中，需要使用 .style 来提及样式。

document.getElementById("imgDisplay" + justNumber).style.width="500";
document.getElementById("imgDisplay" + justNumber).style.height="200";