Image naturalWidth attribute

HTML DOM Image Object

Definition and usage

naturalWidth attribute returns the original width of the image.

For example, if you have an image that was originally 100 pixels wide. Then, you use CSS/or use the "width" attribute in HTML to set the image style, making its width 500 pixels. The naturalWidth attribute will return "100", and the width attribute will return 500.

Tip:Please use naturalHeight attribute Return the original height of the image, or use height attribute Set or return the height of the image height attribute value.

Note:This property is read-only.

Instance

Example 1

Return the original width of the image:

var x = document.getElementById("myImg").naturalWidth;

Try It Yourself

Example 2

The difference between the naturalWidth attribute and the width attribute:

var x = document.getElementById("myImg").naturalWidth;
var y = document.getElementById("myImg").width;

Try It Yourself

Syntax

imageObject.naturalWidth

Technical Details

Return Value: A number representing the original width of the image (in pixels).

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 9.0 Support Support Support

HTML DOM Image Object