Open In App

HTML DOM image naturalHeight property

Improve
Improve
Like Article
Like
Save
Share
Report

naturalHeight : This property is used to get the original height of an image. Since the height of an image to be displayed on the webpage can be modified using the ‘height’ attribute in the <img> tag, hence the naturalHeight property becomes useful in situations where the original height of the image is required rather than the customized one and it is a read-only property. 

Syntax :

imageObject.naturalHeight

Return Value: It returns the original height of an image in pixels. 

Example: In this example, we will see the use of the DOM image naturalHeight property.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <center>
        <img src=
             id="image" width="250" height="205"
             class="alignnone size-medium wp-image-1092360" />
        <br>
        <br>
        <button type="button"
                onclick="getHeight()">
              Click
          </button>
        <div id="text"></div>
    </center>
   
    <script>
        function getHeight() {
            let imgObject =
                document.getElementById("image");
            let output =
                document.getElementById("text");
            output.innerHTML =
               "Height of image: " + imgObject.height +
               "<br>naturalHeight of image: " +
               imgObject.naturalHeight;
        }
    </script>
</body>
 
</html>


Output:

 

Supported Browser:

  • Google Chrome
  • Internet Explorer 9.0 or above
  • Mozilla Firefox
  • Safari
  • Opera


Last Updated : 21 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads