Resizing browser window breaks JavaScript image zoom function

Question

I'm quite new to HTML/CSS/Javascript and I have been following this example to create an interactive zoom of another image. The code works fine for me. It also works if the size of the input image is not absolute, but given in percentages. You can see this here by changing the line

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

to

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

However, switching to percentage-based image size introduces a problem. If the browser window is resized, the zoomed image no longer aligns with the lens. This problem goes away if I refresh the window.

So, how can I tell my JavaScript imageZoom() function that the browser window has been resized, the target image has changed dimensions, and therefore the function variables have changed?

You could add a Resize Observer or resize event listener to react to size changes. — ray
– ray, Commented Jan 27, 2023 at 18:27

Harry Kuril · Accepted Answer · 2023-01-28 10:44:56Z

0

At the end of the main function, add:

window.addEventListener("resize", updateVars)

and define the function

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

answered Jan 28, 2023 at 10:44

Harry Kuril

1136 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Resizing browser window breaks JavaScript image zoom function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related