JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div id="zoomContainer">
        	<img id="zoomImage" src="https://images.pexels.com/photos/14188508/pexels-photo-14188508.jpeg" alt="zoom image" />
        </div>
        <button id="zoomInButton" class="zoomButton">zoom in</button>
        <button id="zoomOutButton" class="zoomButton">zoom out</button>

CSS

html,
            body {
                margin: 0;
                padding: 0;
            }

            #zoomContainer {
                width: 100vw;
                height: 100vh;
                overflow: hidden;
                position: relative;
            }

            #zoomImage {
                position: absolute;
                cursor: move;
                transition: transform 0.3s;
                max-width: 100%;
                max-height: 100%;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .zoomButton {
                position: fixed;
                top: 20px;
                padding: 10px;
                font-size: 16px;
                background-color: #ffffff;
                border: none;
                cursor: pointer;
            }

            #zoomInButton {
                left: 20px;
            }

            #zoomOutButton {
                left: 60px;
            }

JavaScript

document.addEventListener('DOMContentLoaded', function() {
		    var zoomContainer = document.getElementById('zoomContainer');
		    var zoomImage = document.getElementById('zoomImage');
		
		    var zoomLevel = 1;
		    var minZoomLevel = 1;
		    var maxZoomLevel = 2;
		    var zoomIncrement = 0.2;
		    var isDragging = false;
		    let newPosX = 0,
		        newPosY = 0,
		        startPosX = 0,
		        startPosY = 0;
		
		    function updateZoomedImage() {
		        var imageWidth = zoomImage.offsetWidth;
		        var imageHeight = zoomImage.offsetHeight;
		
		        var newImageWidth = imageWidth * zoomLevel;
		        var newImageHeight = imageHeight * zoomLevel;
		
		        var left = zoomImage.offsetLeft;
		        var top = zoomImage.offsetTop;
		
		        zoomImage.style.transform = 'scale(' + zoomLevel + ')';
		        zoomImage.style.width = newImageWidth + 'px';
		        zoomImage.style.height = newImageHeight + 'px';
		
		        // Restrict images from leaving containers
		        if (Math.abs(zoomImage.offsetLeft - newPosX) >= Math.abs((parseInt(zoomImage.style.width, 10) - window.innerWidth) / 2)) {
		            left = 0;
		        }
		        if (Math.abs(zoomImage.offsetTop - newPosY) >= Math.abs((parseInt(zoomImage.style.height, 10) - window.innerHeight) / 2)) {
		            top = 0;
		        }
		
		        zoomImage.style.left = left + 'px';
		        zoomImage.style.top = top + 'px';
		
		        // when the user clicks down on the element
		        zoomImage.addEventListener('mousedown', function(e) {
		            e.preventDefault();
		
		            // get the starting position of the cursor
		            startPosX = e.clientX;
		            startPosY = e.clientY;
		
		            document.addEventListener('mousemove', mouseMove);
		
		            document.addEventListener('mouseup', function() {
		                document.removeEventListener('mousemove', mouseMove);
		            });
		
		        });
		    }
		
		    function...