Example
Return the original width of an image:
var x = document.getElementById("myImg").naturalWidth;
The result of x will be:
107
Try it Yourself »
Definition and Usage
The naturalWidth property returns the original width of an image.
For example, if you have an image that is originally 100 pixels wide. Then, you style the image with CSS/or by using the HTML "width" attribute to make it 500 pixels wide. The naturalWidth property will return "100", the width property however, will return 500.
Tip: Use the naturalHeight property to return the original height of an image, or the height property to set or return the value of the height attribute of an image.
Note: This property is read-only.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| naturalWidth | Yes | 9.0 | Yes | Yes | Yes |
Syntax
imageObject.naturalWidth
Technical Details
| Return Value: | A Number, representing the original width of an image in pixels |
|---|
More Examples
Example
The difference between the naturalWidth property and the width property:
var x = document.getElementById("myImg").naturalWidth;
var y =
document.getElementById("myImg").width;
Try it Yourself »
< Image Object