HTMLImageElement: height-Eigenschaft

Ein ganzzahliger Wert, der die Höhe des Bildes angibt. Die Maßeinheit, in der die Höhe definiert ist, hängt davon ab, ob das Bild auf ein visuelles Medium gerendert wird oder nicht.

• Wenn das Bild auf ein visuelles Medium wie einen Bildschirm oder Drucker gerendert wird, wird die Höhe in CSS-Pixel angegeben.
• Andernfalls wird die Höhe des Bildes mit seiner natürlichen (intrinsischen) Höhe dargestellt, angepasst an die Anzeigedichte, wie durch naturalHeight angezeigt.

In diesem Beispiel werden zwei verschiedene Größen für ein Bild einer Uhr unter Verwendung des [srcset](/de/docs/Web/HTML/Element/img#srcset)-Attributs bereitgestellt. Eine ist 200 Pixel breit und die andere ist 400 Pixel breit. Darüber hinaus wird das sizes-Attribut verwendet, um die Breite anzugeben, in der das Bild bei gegebener Breite des Viewports gezeichnet werden soll.

Konkret wird für Viewports bis zu 400px Breite das Bild mit einer Breite von 200px gezeichnet; andernfalls wird es mit 300px gezeichnet.

<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" />

Der JavaScript-Code betrachtet die height, um die Höhe des Bildes angesichts der Breite zu bestimmen, in der es derzeit gezeichnet wird.

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

Dieses Beispiel ist vielleicht einfacher auszuprobieren in its own window.

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