How to zoom-in and zoom-out image using JavaScript ?

Given an image and the task is to increase and decrease the image size using JavaScript. Use the following property to increase and decrease the image.

Using Width property: It is used to change the new values to resize the width of the element.

Syntax:

object.style.width = "auto|length|%|initial|inherit"

Approach:

  • Get the selector of the required image using .getElementById(selector).
  • Store the current width value in the variable using .clientWidth.
  • Now change the width value to new using .style.width.
  • It will proportionally increase and decrease the dimension of an image.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to zoom-in and zoom-out
        image using JavaScript ?
    </title>
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <h3>
        JavaScript | Increase and
        Decrease image size
    </h3>
    <hr>
      
    <div class="box">
          
        <img src=
            id="geeks" GFG="250" alt="Geeksforgeeks">
    </div>
    <hr>
      
    <button type="button" onclick="zoomin()">
        Zoom-In
    </button>
      
    <button type="button" onclick="zoomout()"
        Zoom-Out
    </button>
      
    <script type="text/javascript">
        function zoomin() {
            var GFG = document.getElementById("geeks");
            var currWidth = GFG.clientWidth;
            GFG.style.width = (currWidth + 100) + "px";
        }
          
        function zoomout() {
            var GFG = document.getElementById("geeks");
            var currWidth = GFG.clientWidth;
            GFG.style.width = (currWidth - 100) + "px";
        }
    </script>
</body>
  
</html>           

chevron_right


Output:

  • Before click on button:
  • After click on Zoom-In Button:
  • After click on Zoom-Out Button:

Using Height property: It is used to change the new values to resize the height of the element.

Syntax:

object.style.height = "auto|length|%|initial|inherit"

Approach:

  • Get the selector of the required image using .getElementById(selector).
  • Store the current height value in the variable using .clientHeight.
  • Now change the width value to new using .style.height.
  • It will proportionally increase and decrease the dimension of an image.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to zoom-in and zoom-out
        image using JavaScript ?
    </title>
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <h3>
        JavaScript | Increase and 
        Decrease image size
    </h3>
    <hr>
      
    <div class="box">
        <img src=
                id="geeks" GFG="250" alt="Geeksforgeeks">
    </div>
    <hr>
      
    <button type="button" onclick="zoomin()"
        Zoom-In
    </button>
      
    <button type="button" onclick="zoomout()"
        Zoom-Out
    </button>
      
    <script type="text/javascript">
        function zoomin() {
            var GFG = document.getElementById("geeks");
            var currHeight = GFG.clientHeight;
                GFG.style.height = (currHeight + 40) + "px";
        }
        function zoomout() {
            var GFG = document.getElementById("geeks");
            var currHeight = GFG.clientHeight;
                GFG.style.height = (currHeight - 40) + "px";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before click on button:
  • After click on Zoom-In Button:
  • After click on Zoom-Out Button:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.