调整浏览器窗口大小会破坏JavaScript图像缩放功能

3qpi33ja  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(109)

我是HTML/CSS/Javascript的新手,我一直在用this example创建另一个图像的交互式缩放。代码对我来说很好用。如果输入图像的大小不是绝对的,而是以百分比给出的,它也能用。你可以通过改变here的行

<img id="myimage" src="img_girl.jpg" width="300" height="240">

<img id="myimage" src="img_girl.jpg" width="50%" height="50%">

但是,切换到基于百分比的图像大小会带来一个问题。如果调整浏览器窗口的大小,缩放后的图像将不再与透镜对齐。如果刷新窗口,此问题将消失。
那么,如何告诉JavaScript imageZoom()函数,浏览器窗口已经调整大小,目标图像已经改变尺寸,因此函数变量也已经改变?

62lalag4

62lalag41#

在main函数的末尾添加:

window.addEventListener("resize", updateVars)

并定义函数

function updateVars(e) {                                                      
                                                                                
    /* Recalculate ratios. */                                                                                       
    cx = result.offsetWidth / lens.offsetWidth;                                 
    cy = result.offsetHeight / lens.offsetHeight;                               
    result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  }

相关问题