HTMLImageElement: height-Eigenschaft

Ein ganzzahliger Wert, der die Höhe des Bildes angibt. Die Bedingungen, unter 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-Pixel ausgedrückt.
• Andernfalls wird die Höhe des Bildes unter Verwendung seiner natürlichen (intrinsischen) Höhe dargestellt, angepasst an die Displaydichte, wie durch naturalHeight angegeben.

In diesem Beispiel werden zwei unterschiedliche Größen für ein Bild einer Uhr mit dem srcset-Attribut angegeben. Eine ist 200px breit, die andere ist 400px breit. Weiterhin wird das sizes-Attribut angegeben, um die Breite zu spezifizieren, in der das Bild gezeichnet werden sollte, basierend auf der Breite des Viewports.

Speziell für Viewports bis zu 400px Breite wird 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="/https/developer.mozilla.org/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="(width <= 400px) 200px, 300px" />

Der JavaScript-Code betrachtet die height, um die Höhe des Bildes zu bestimmen, basierend auf der Breite, in der es momentan 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 his own window.

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