HTMLImageElement: свойство naturalHeight

Свойство naturalHeight интерфейса HTMLImageElement — это значение только для чтения, которое возвращает внутреннюю (естественную), скорректированную под плотность пикселей высоту изображения в CSS-пикселях.

Это высота изображения, если оно отображается без ограничений по высоте; если вы не задаёте высоту изображения или помещаете его в контейнер, который ограничивает или явно задаёт высоту изображения, оно будет отображаться с этой высотой.

Целочисленное значение, обозначающее внутреннюю высоту изображения в CSS-пикселях. Это высота, на которой изображение естественным образом отображается, когда для него не задано ограничение или конкретное значение. Эта естественная высота корректируется с учётом плотности пикселей устройства, на котором оно отображается, в отличие от height.

Если внутренняя высота недоступна (потому что изображение не указывает внутреннюю высоту или данные изображения недоступны для получения этой информации), naturalHeight возвращает 0.

Этот пример отображает как естественный, скорректированный под плотность размер изображения, так и его размер в отображении, изменённый CSS страницы и другими факторами.

<div class="box">
  <img
    src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
    class="image"
    alt="A round wall clock with a white dial and black numbers" />
</div>
<pre></pre>

HTML содержит изображение размером 400x398 пикселей, которое помещено в <div>.

.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}

Главное, что стоит отметить в CSS выше, — это то, что стили контейнера, в котором будет отображаться изображение, имеют ширину 200 пикселей, а изображение будет отображаться, заполняя всю ширину (100%).

const output = document.querySelector("pre");
const image = document.querySelector("img");

image.addEventListener("load", (event) => {
  const { naturalWidth, naturalHeight, width, height } = image;
  output.textContent = `
Natural size: ${naturalWidth} x ${naturalHeight} pixels
Displayed size: ${width} x ${height} pixels
`;
});

Код JavaScript выводит естественный и отображаемый размеры в <pre>. Это выполняется в ответ на обработчик события load изображения, чтобы убедиться, что изображение доступно перед попыткой проверки его ширины и высоты.