HTMLImageElement: height Eigenschaft

Ein ganzzahliger Wert, der die Höhe des Bildes angibt. Die Begriffe, in denen die Höhe definiert ist, hängen 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-Pixeln ausgedrückt.
• Andernfalls wird die Höhe des Bildes mit der natürlichen (intrinsischen) Höhe dargestellt, die an die Anzeigedichte angepasst ist, wie durch naturalHeight angegeben.

In diesem Beispiel werden zwei unterschiedliche Größen für ein Bild einer Uhr mit dem srcset-Attribut bereitgestellt. Eine ist 200px breit und die andere ist 400px breit. Weiterhin wird das sizes-Attribut bereitgestellt, um die Breite anzugeben, mit der das Bild gezeichnet werden soll, basierend auf der Breite des Ansichtsfensters.

Speziell für Ansichtsfenster, die bis zu 400px breit sind, wird das Bild mit einer Breite von 200px gezeichnet; andersfalls wird es mit 300px gezeichnet.

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

Der JavaScript-Code betrachtet die height, um die Höhe des Bildes zu bestimmen, gemessen an der Breite, mit 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 kann einfacher ausprobiert werden in einem eigenen Fenster.

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