jackmoore / wheelzoom

A small script for zooming IMG elements with the mousewheel/trackpad.
http://www.jacklmoore.com/wheelzoom
MIT License
342 stars 95 forks source link

Does not work/update with responsive images #39

Open MickL opened 5 years ago

MickL commented 5 years ago

On change of image-size the script needs to recalculate the width/height of the image. Currently the background size stays the same.

A typical usecase is having a responsive image like max-width: 100%; height: auto;.

Andi-Lo commented 3 years ago

I experienced the same problem, that there is no way to update the "width" property of wheelzoom. As a workaround I am using a ResizeObserver on the image element and trigger a fresh init like this:

    const obs = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        imgElement.src = myImageSource; // my source is a base64 encoded string
        imgElement.dispatchEvent(new Event('load'));
      });
    });