HTMLImageElement: свойство height

Свойство height интерфейса HTMLImageElement указывает высоту отображения изображения в CSS-пикселях, если изображение отображается на каком-либо визуальном носителе, таком как экран или принтер; в противном случае это естественная высота изображения с поправкой на плотность пикселей.

Целое число, указывающее высоту изображения. Способ определения высоты зависит от того, отображается ли изображение на визуальном носителе.

• Если изображение отображается на визуальном носителе, таком как экран или принтер, высота выражается в CSS-пикселях.
• В противном случае высота изображения определяется с использованием его естественной (внутренней) высоты, скорректированной с учетом плотности отображения, как указано в naturalHeight.

В этом примере для изображения часов с помощью атрибута srcset заданы два размера. Один — 200 пикселей в ширину, другой — 400 пикселей в ширину. Кроме того, используется атрибут sizes, чтобы указать ширину изображения, исходя из ширины области просмотра.

В частности, для областей просмотра шириной до 400 пикселей изображение отображается с шириной 200 пикселей; в противном случае — 300 пикселей.

<p>Image height: <span class="size">?</span>px (resize to update)</p>
<img
  src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
  alt="Clock"
  srcset="
    /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
    /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
  "
  sizes="(max-width: 400px) 200px, 300px" />

Код JavaScript анализирует height для определения высоты изображения, исходя из текущей ширины отображения.

const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateHeight = (event) => {
  output.innerText = clockImage.height;
};

window.addEventListener("load", updateHeight);
window.addEventListener("resize", updateHeight);

Этот пример можно проще попробовать в отдельном окне.

• HTMLCanvasElement.height
• HTMLEmbedElement.height
• HTMLIFrameElement.height
• HTMLObjectElement.height
• HTMLSourceElement.height
• HTMLVideoElement.height