Skip to content
Related Articles

Related Articles

Improve Article

How to get the image size (height & width) using JavaScript ?

  • Last Updated : 15 Apr, 2019
Geek Week

For getting size of an image (height and width), Element.clientHeight and Element.clientWidth properties is used.

  • Element.clientHeight: We can access the inner height of an element with this property. This height include the padding but not the margin and border.
  • Element.clientWidth: We can access the inner width of an element with this property. This width include the padding but not the margin and border.

    Note: Here Element is image, So image.clientHeight and image.clientWidth will be used respectively for getting height and width of the image.

    Example: Getting image size.




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <title>
          getting-height-width-image-using-javascript
      </title>
        <style>
            h1 {
                text-align: center;
                letter-spacing: 1px;
            }
              
            img,
            button {
                display: block;
                margin: 0 auto;
            }
              
            button {
                font-size: large;
            }
        </style>
    </head>
      
    <body>
      
        <h1>
          Getting height and width of an image
      </h1>
        <br>
        <br>
        <img src=
             alt="logo-geeksforgeeks"
             id="image">
        <button type="submit"
                onclick="myFunc()">
          Get height and width
      </button>
      
        <div style="background-color: lightgray">
            <div id="height">
      
            </div>
      
            <div id="width">
      
            </div>
        </div>
    </body>
      
    <script>
        function myFunc() {
            let image = document.getElementById('image');
            let height = document.getElementById('height');
            var width = document.getElementById('width');
      
            height.innerHTML += '<h1>height of image is :'
            + image.clientHeight + 'px </h1>';
            
            width.innerHTML += '<h1>width of image is :'
            + image.clientWidth + 'px </h1>';
        }
    </script>
      
    </html>

    Output:
    After clicking on the button:

    After clicking on the button:

    Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




    My Personal Notes arrow_drop_up
Recommended Articles
Page :