How to increase and decrease image size using JavaScript

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the JavaScript width and height property

You can use either width or height JavaScript property to proportionally increase and decrease the dimension of an image like zoom-in and out feature.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>JavaScript Increasing and Decreasing Image Size</title>
  • <script type="text/javascript">
  •     function zoomin(){
  •         var myImg = document.getElementById("sky");
  •         var currWidth = myImg.clientWidth;
  •         if(currWidth == 500){
  •             alert("Maximum zoom-in level reached.");
  •         } else{
  •             myImg.style.width = (currWidth + 50) + "px";
  •         } 
  •     }
  •     function zoomout(){
  •         var myImg = document.getElementById("sky");
  •         var currWidth = myImg.clientWidth;
  •         if(currWidth == 50){
  •             alert("Maximum zoom-out level reached.");
  •         } else{
  •             myImg.style.width = (currWidth - 50) + "px";
  •         }
  •     }
  • </script>
  • </head>
  • <body>
  •     <p>
  •         <button type="button" onclick="zoomin()">Zoom In</button>
  •         <button type="button" onclick="zoomout()">Zoom Out</button>
  •     </p>
  •     <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.