Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM image naturalWidth property

  • Last Updated : 21 Dec, 2020

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

Syntax : 

imageObject.naturalWidth

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

Example: 

html




<html>
 
<body>
    <img src=
id="image" alt="" width="250" height="205"
class="alignnone size-medium wp-image-1092360" />
    <br>
    <br>
    <button type="button" onclick="getWidth()">Click</button>
    <div id="text"></div>
    <script>
        function getWidth() {
            var imgObject = document.getElementById("image");
            var output = document.getElementById("text");
            output.innerHTML = "Width of image: " + imgObject.width +
            "<br>naturalWidth of image: " + imgObject.naturalWidth;
        }
    </script>
</body>
 
</html>

Output: 
Before click: 
 



After click: 
 

 

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

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :