How to zoom in and zoom out images using JavaScript?

Javascript Web Development Front End Technology

The zoom-in and zoom out is an important functionality for the image. We can see every single information of the image by zoom-in. Maybe, you can press the ‘ctrl’ and ‘+’ keys together to zoom in to your browser, and you can see everything looks bigger in the browser window.

The zoom-in feature is useful for reading small texts on the screen also. So, there can be various use cases of zoom in and zoom out. In this tutorial, we will learn to zoom in and zoom out images using JavaScript.

Use the height and width properties to zoom in and zoom out

JavaScript allows us to change the dimensions of the image. It means we can change the height and width of the image using JavaScript. To zoom in, we can increase the height and width of the image, and to zoom out, we can decrease the height and width of the image.

Syntax

Users can follow the syntax below to use the height and width properties of the image to add zoom in and zoom out features.

// Zoom In
image.style.width = (width + 50) + "px";
image.style.height = (height + 50) + "px";

// zoom out
image.style.width = (width - 50) + "px";
image.style.height = (height - 50) + "px";

In the above syntax, width and height are the current width and height of the image, which we can get in JavaScript.

Example 1

In the example below, we created the zoom in and zoom out buttons. When the user presses the zoom in and zoom out buttons, it invokes the ZoomIn() and ZoomOut() functions, respectively.

In the ZoomIn() and ZoomOut() functions, we get the image using its id and height and width using the ClientsHeight and ClientsWidth properties. After that, we add or remove 50 from the current height and width and set a new height and width for the image.

<html>
<body>
   <h3>Using the <i> height and width property </i> of images to add zoom in and zoom out features in images using JavaScript </h3>
   <img src ="https://www.tutorialspoint.com/images/trending_categories.svg" height = "500px" width = "500px" alt = "sample image" id = "image"> <br> <br>
   <button onclick = "ZoomIn()"> Zoom IN </button>
   <button onclick = "ZoomOut()"> Zoom Out </button>
   <script>
      let image = document.getElementById('image');
      function ZoomIn() {
         let width = image.clientWidth;
         let height = image.clientHeight;
         image.style.width = (width + 50) + "px";
         image.style.height = (height + 50) + "px";
      }
      function ZoomOut() {
         let width = image.clientWidth;
         let height = image.clientHeight;
         image.style.width = (width - 50) + "px";
         image.style.height = (height - 50) + "px";
      }
   </script>
</body>
</html>

Example 2

In this example, we are taking the user input for the new width and height of the image. We are taking the number input from users and setting that number of pixels as the height and width of the image. So, users can set the custom height and width of the image.

<html>
<body>
   <h3>Allowing users to set custom <i> height and width property </i> of images to add zoom in and zoom out features in images using JavaScript</h3>
   <img src ="https://www.tutorialspoint.com/images/trending_categories.svg" height = "300px" width = "300px" alt = "sample image" id = "image"> <br> <br>
   <button onclick = "ZoomInOROut()"> Zoom IN or Out </button>
   <script> 
      let image = document.getElementById('image');
      function ZoomInOROut() {
         let width = prompt("Enter the new width of the image ", 500);
         let height = prompt("Enter the new height of the image", 500);
         image.style.width = width + "px";
         image.style.height = height + "px";
      }
   </script>
</body>
</html>

Example 3

In the example below, we added the event listener for a keypress event on the window. The event will trigger whenever users press any key, and the event listener will call the callback function.

In the event listener function, we check if the key pressed is ‘p’, we increase the height and width of the image by 100px, and if users press the key ‘q’, we decrease the height of the image by 100px.

<html>
<body>
   <h3>Allowing users to set custom <i> height and width property </i> of images to add zoom in and zoom out features in images using JavaScript</h3>
   <h4>Press p for zoom in and q for zoom out </h4>
   <img src = "https://www.tutorialspoint.com/images/trending_categories.svg" height = "300px" width = "300px" alt = "sample image" id = "image"> <br> <br>
   <script>
      let image = document.getElementById('image');
      
      // add keypress event listener on window
      window.addEventListener('keypress', (event) => {
      
         // get the width and height of the image
         let width = image.clientWidth;
         let height = image.clientHeight;
      
         // when the user presses the 'p' key, zoom in
         if (event.key == 'p') {
            image.style.width = (width + 100) + "px";
            image.style.height = (height + 100) + "px";
         }
      
         // zoom out when the user presses the q key
         if (event.key == "q") {
            image.style.width = (width - 100) + "px";
            image.style.height = (height - 100) + "px";
         }
      })
   </script>
</body>
</html>

We have seen three examples to zoom in and zoom out images using JavaScript. To zoom in and out, we just need to change the width and height of the targeted image. In the last example, we have seen how we can use the key press events to zoom in and zoom out.