CODEWITHSUNDEEP
javascriptimagedomdownloadwidth
flasher1101
flasher1101

Reputation: 83

The width of img before appending to DOM?

I've done some simple code tasks and I've found that I can get height and width of downloaded img by its img.height and img.width attributes, without appending it to DOM. Is this crossbrowser? Coudn't find any info on this behavior.

Upvotes: 1

Views: 36

Answers (1)

Ran Turner
Ran Turner

Reputation: 18026

You can use the naturalWidth and naturalHeight for that requirement. They represent the original width and height respectively of the image.

naturalWidth - the original width of the image used in tag.

width - the value/default value of width attribute of tag.

naturalHeight - the original height of the image used in tag.

height - the value/default value of height attribute of tag.

For example: 

let src = 'http://www.fillmurray.com/g/400/600';
let img = document.createElement('img');
img.onload = () => {
  console.log(`naturalWidth = ${img.naturalWidth}`);
  console.log(`naturalHeight = ${img.naturalHeight }`);
}
img.src = src;

More about naturalHeight - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight

More about naturalWidth - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth

Upvotes: 2

Related Questions