HTML DOM image naturalWidth property
Last Updated :
21 Jun, 2023
naturalWidth: This property is used to get the original width of an image. Since the width of an image to be displayed on the webpage can be modified using the ‘width’ attribute of the <img> tag, hence the naturalWidth property becomes useful in situations where the original width of the image is required rather than the customized one. It is a read-only property.
Syntax :
imageObject.naturalWidth
Return Value: It returns the original width of the image in pixels.
Example: In this example, we will see the use of the DOM image naturalWidth property
HTML
<!DOCTYPE html>
< html >
< body >
< img src =
id = "image" width = "250" height = "205"
class = "alignnone size-medium wp-image-1092360" />
< br >
< br >
< button type = "button"
onclick = "getWidth()" >
Click
</ button >
< div id = "text" ></ div >
< script >
function getWidth() {
let imgObject =
document.getElementById("image");
let output =
document.getElementById("text");
output.innerHTML =
"Width of image: " + imgObject.width +
"< br >naturalWidth of image: " +
imgObject.naturalWidth;
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer 9.0 or above
- Mozilla Firefox
- Safari
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...