Treat zooming more like resizing a page element

[CoryAlexMartin]

How Image Zoom handled zooming. It was the equivalent of changing the image's width and height in css, so elements on the page reacted to it.

How Rotate and Zoom Images handles it. Image simply becomes larger and elements on the page can be obscured by the image.

Another downside to the current method is that the image itself can be obscured when zoomed.

[jedikalimero]

I second this suggestion. Sometimes the image obscures other elements behind it making them unreachable and sometimes the image is obscured by other elements in front of it, obscuring parts of the image. That's not what one desires when zooming an image. also, parts of the image may fall beyond the limits of the window making them unreachable because scroll bars don't match the size of the zoomed image. By changing width and height in CSS, all elements move to accommodate the image correctly. There are some exceptions, of course, but it usually works better than current method.

[MikkCZ]

You are correct. What this add-on does is a scale transformation of the image instead of changing its actual size.

Unfortunately I haven't got much time to maintain and more develop this add-on since the few initial versions. Honestly I never used it and it was more a test or proof what WebExtensions API do and don't allow.

The code which needs to be tweaked resides in https://github.com/MikkCZ/rotate-and-zoom-image/blob/master/src/js/ImageContainer.js. For this to happen, in setImage: function(clickedImage) the container should determine and store to an instance variable the original image size (the width and height in pixels, which the image takes in the page). These values can be later use to set style.width and style.height in zoomImage: function(percent). The function to reset or undo transformations need to be rewritten too.