Question

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

我使用以下代码：

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。 this.ratio计算出0.2866666666666667所以this.width应该计算到287.但是我得到82这是1000 * 0.2866666666666667 * 0.2866666666666667。

出于诊断原因，我输入了console.log，正确计算了this.height和this.ratio，但宽度是以某种方式乘以两倍。

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

Answer 1

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

所以，你将高度调整为0.2866666666666667（但这也会调整宽度），然后再次应用0.2866666666666667 - 这就是你应用两次比率的原因。

您可以对此行发表评论 - 您应该在控制台中获得预期的值：

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

Answer 2

您需要提前计算新的高度和宽度值，以免因另一个的变化而产生偏差。

＆＃13;

function resize() {
  var element = document.getElementById('image');
  var newHeight = element.height * 0.5;
  var newWidth = element.width * 0.5;
  
  console.log('Original width and height: ', element.width, element.height);
  
  element.height = newHeight;
  element.width = newWidth;
  
  console.log('New width and height: ', element.width, element.height);
}

＆＃13;

<div>
  <button onclick="resize()">Shrink By 50%</button>
</div>
<img id="image" src="https://www.gravatar.com/avatar/07bb1a01c672794db448fdb8e180042e?s=328&d=identicon&r=PG&f=1" />

＆＃13;

宽度比计算正在应用两次

2 个答案: