javascript - How to zoom in an image and center it?

Question

Welcome To Ask or Share your Answers For Others

javascript - How to zoom in an image and center it?

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:34:53+0000

As I said in my comment above, I would avoid the zoom css property and stick to just javascript. I managed to throw together the following code which works pretty well for the first click, really all it needs is a little more dynamically (even a word?).

        <html>
              <head>
                <script type="text/javascript">
              function resizeImg (img)
              {
            var resize = 150; // resize amount in percentage
            var origH  = 200;  // original image height
            var origW  = 200; // original image width
            var mouseX = event.x;
            var mouseY = event.y;
            var newH   = origH * (resize / 100) + "px";
            var newW   = origW * (resize / 100) + "px";
            
                // Set the new width and height
            img.style.height = newH;
            img.style.width  = newW;
            
            var c = img.parentNode;
            
            // Work out the new center
            c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
            c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
              }
            </script>
            <style type="text/css">
              #Container {
                position:relative;
                width:200px;
                    height:200px;
                overflow:hidden;
              }
            </style>
              </head>
              <body>
                <div id="Container">
                  <img alt="Click to zoom" onclick="resizeImg(this)" 
                    src="https://picsum.photos/200" />
                </div>
              </body>
            </html>

Categories

javascript - How to zoom in an image and center it?

javascript - How to zoom in an image and center it?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags