HTMLImageElement.naturalHeight
(and width
) returns the original dimensions for an image, regardless of how it is displayed.
Example
Imagine a page that has an image:
<img src="https://imgur.com/RrupgUW.jpg" width="250" />
const img = document.querySelector('img');
// image needs to be loaded before we can get its natural dimensions
img.onload = () => {
const { width, height, naturalWidth, naturalHeight } = img;
console.log({
width,
height,
naturalWidth,
naturalHeight,
});
};