In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > naturalWidth (img)

naturalWidth property (img)

Browser support:

9

Retrieves the original width of the linked image.

To get the original height of the linked image, use the naturalHeight property.

If you need the displayed size of an image, use the offsetWidth and offsetHeight properties.

Syntax:

object.naturalWidth;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that retrieves the width, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the naturalWidth property:

<head>
    <script type="text/javascript">
        function GetOrigSize () {
            var image = document.getElementById ("image");
            if ('naturalHeight' in image) {
                var message = "The original size of the image:";
                message += "\n height: " + image.naturalHeight + "px";
                message += "\n width: " + image.naturalWidth + "px";
                alert (message);
            } 
            else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <img id="image" src="bg.gif" width="60px" height="60px" />
    <button onclick="GetOrigSize ();">Get the original size of the image</button>
</body>