Zooming in on the center of visible image?

Question

So, this is a bit of a math heavy question. I am working on an e-comic book reader in electron, and I want to program it so that you can zoom in, but that it doesn't zoom in from the top left corner, but instead from the center.

@100%        @200% Currently   @200% Ideally      
----         --------          --------
|  |         |  |   |          | ---- |
----         ----   |          | |  | |
visible      |      |          | ---- |
size         --------          --------

The zoom function is tied to an input slider ranging from 100 to 300 , then converted to percentage for the visible div

function pageZoom() { // invoked onchange
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider');

 inner.style.width = zoomSlide.value + "%";
 var scrollShift = (zoomSlide.value - 1)/2; // This is the function that needs to change

 outer.scrollTop = scrollShift; // to update the scrollbars to the correct position
 outer.scrollLeft = scrollShift;
};

With this as the html...

<div class="mainWindow dragscroll" id="viewer"> <!-- this element has the scroll bars -->
    <div id="innerWindow"> <!-- this element grows by input -->
        <img id="viewImgOne" /> <!-- set at 50% width -->
        <img id="viewImgTwo" /> <!-- set at 50% width -->
    </div>
</div>

It's been forever since I've taken any sort of math class, so my algebra is rusty .

 var body = document.body; // clientHeight & clientWidth are the user visible dimensions
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider'); // 100 to 300

Any suggestions?

---

edit: similar to the CSS in concept, but requiring differing methods of handling zooming, as well as a more permanent execution besides hovering. Inputs called for differing window dimensions, different zoomed locations, and implementing JS to solve the issues.

Answer 1

function pageZoom() {
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider');
 var imgOne = document.getElementById('viewImgOne');
 var imgTwo = document.getElementById('viewImgTwo');
 console.log(inner.clientHeight)

 // Center Points
 var cPX = outer.scrollTop + outer.clientHeight/2;
 var cPY = outer.scrollLeft + outer.clientWidth/2;

 // Position Ratios to whole
 var cPXR = cPX/inner.clientHeight;
 var cPYR = cPY/inner.clientWidth;

 inner.style.width = zoomSlide.value + "%";
 if(imgOne.clientHeight >= imgTwo.clientHeight) {
   inner.style.height = imgOne.clientHeight + "px";
 } else {
   inner.style.height = imgTwo.clientHeight + "px";
 };
 outer.scrollTop = inner.clientHeight*cPXR - outer.clientHeight/2;
 outer.scrollLeft = inner.clientWidth*cPYR - outer.clientWidth/2;
};

Get your percentages, save them, zoom in, then re-apply your percentages onto the who, subtracting half the outer.clientWidth to sync up again with the scrollTop and ScrollLeft positions. It is a bit choppy, but it works.