X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Image naturalWidth Property

Image Object Reference Image Object

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

Internet Explorer Firefox Opera Google Chrome Safari

The naturalWidth property is supported in all major browsers.


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 Reference Image Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook