Javascript 宽度比计算应用了两次

我试图创建一个覆盖，当点击缩略图时，它会显示一个更大版本的图像。我遇到的问题是，图像的宽度正在被缩小到很远

我正在使用以下代码：

largeImage.addEventListener('load', function() {
    // Resize if Taller
    if (this.height > window.innerHeight) {
        this.ratio = window.innerHeight / this.height;
        this.height = window.innerHeight;
        this.width = this.width * this.ratio;
        console.log('Ratio: ' + this.ratio);
        console.log('Height: ' + this.height);
        console.log('Width: ' + this.width);
    }

    // Resize if Wider
    if (this.width > window.innerWidth) {
        this.ratio = window.innerWidth / this.width;
        this.height = this.height * this.ratio;
        this.width = this.width * this.ratio;
    }
}, false);

所讨论的图像是1000x1500，window.innerHeight和.innerWidth分别是430px和1064px。此.ratio计算为0.286667，因此此.width应计算为287。但是我得到的是82，也就是1000*0.2866666667*0.2866666667

出于诊断原因，我输入了console.log，并且正确地计算了this.height和this.ratio，但不知何故，宽度被乘以了两倍

---

编辑：我更新了代码以包含整个eventHandler。

您需要提前计算新的高度和宽度值，以便两者都不会因另一个值的更改而扭曲

function resize（）{
var element=document.getElementById（'image'）；
var newHeight=element.height*0.5；
var newWidth=element.width*0.5；
console.log（'原始宽度和高度：'，element.width，element.height）；
element.height=新高度；
element.width=newWidth；
console.log（'新宽度和高度：'，element.width，element.height）；
}

缩水50%

调整高度时，图像的宽度会自动调整

因此，将高度调整0.286667（但这也会调整宽度），然后再次应用0.286667-这就是为什么应用了两次比率

您可以对此行进行注释-您应该在控制台中获得预期的值：

this.width = this.width * this.ratio;

---

您是否错误地调用了该函数两次/有一个姐妹“if”语句将检查图像的宽度是否比屏幕宽。我把它注释掉了，仍然有同样的问题。没有答案，但是你可以将

this.height=this.height*this.ratio

简化为

this.height=window.innerHeight

。当你用this.ratio更改this.height时，宽度与高度之间的比例会保持不变，因此它会再次缩小吗？如果您只是注释掉this.width=行呢？它不应该是“if-else”结构吗。如果它既宽又高，你可能会扩展得太多。没有看到任何其他错误的想法是的，我只是在搞乱代码时发现了这一点。我的问题是，原来的代码曾经运行过，因为它实际上起源于一个Lynda.Com课程（我确实通知了作者）。所以我现在的问题是：是什么改变了它，使它自动做的宽度以及？如果宽度和高度是在HTML中设置的，那么改变一个维度不会按比例调整另一个维度——这只会在事先没有设置宽度和高度的情况下发生。HTML中也没有指定宽度和高度。这是一个全新的元素，由父addEventListener动态创建，单击缩略图即可。在MDN上搜索后，我找到了imgElement.naturalHeight和.naturalWidth属性，并尝试了这些属性，效果也很好。