JavaScript Image naturalHeight

naturalHeight is a read-only image property that reports the intrinsic, density-corrected height of the loaded image in CSS pixels. It is different from the rendered height, which can change because of attributes, CSS or JavaScript.

const value = document.getElementById('i1').naturalHeight;

Natural vs rendered height Top ↑

If CSS or JavaScript changes the displayed size, naturalHeight still reports the intrinsic height of the loaded image. If the intrinsic size is not yet available, it can be 0.

Read it after the image loads Top ↑

const image = document.getElementById('i1');
image.addEventListener('load', () => {
  console.log(image.naturalHeight);
});

Reset to natural dimensions Top ↑

image.width = image.naturalWidth;
image.height = image.naturalHeight;

Working demos Top ↑

Demo resetting image to naturalHeight / natural size →

Demo changing height and width →

Demo resetting to naturalHeight and naturalWidth →

Reading naturalWidth of Image → ← Image Object

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: