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.

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, }); };

https://jsfiddle.net/robindrexler/dxo28e7n/3/