THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Image naturalHeight Property

Image Object Reference Image Object

Example

Return the original height of an image:

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

The result of x will be:

98
Try it yourself »

Definition and Usage

The naturalHeight property returns the original height of an image.

For example, if you have an image that is originally 200 pixels high. Then, you style the image with CSS/or by using the HTML "height" attribute to make it 500 pixels high. The naturalHeight property will return "200", the height property however, will return 500.

Tip: Use the naturalWidth property to return the original width of an image, or the width property to set or return the value of the width attribute of an image.

Note: This property is read-only.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The naturalHeight property is supported in all major browsers.

Note: The naturalHeight property is not supported in Internet Explorer 8 and earlier versions.


Syntax

imageObject.naturalHeight

Technical Details

Return Value: A Number, representing the original height of an image in pixels

More Examples

Example

The difference between the naturalHeight property and the height property:

var x = document.getElementById("myImg").naturalHeight;
var y = document.getElementById("myImg").height;
Try it yourself »

Image Object Reference Image Object