Access the natural height of an image

July 2, 2019

HTMLImageElement.naturalHeight (and width) returns the original dimensions for an image, regardless of how it is displayed.


Imagine a page that has an image:

<img src="" 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, }); };