HTMLImageElement: height-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die height-Eigenschaft des HTMLImageElement-Interfaces gibt die Höhe an, in der das Bild gezeichnet wird, in CSS-Pixel, wenn das Bild auf ein visuelles Medium wie einen Bildschirm oder Drucker gezeichnet oder gerendert wird. Andernfalls ist es die natürliche, pixelgenau korrigierte Höhe des Bildes.

In diesem Artikel

Wert

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

Beispiele

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

HTML

Für Ansichtsfenster bis zu einer Breite von 400px wird das Bild mit einer Breite von 200px gezeichnet. Andernfalls wird es mit 400px gezeichnet.

html
<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="(width <= 400px) 200px, 300px" />

JavaScript

Der JavaScript-Code betrachtet die height, um die Höhe des Bildes zu bestimmen, gegeben die Breite, mit der es gerade gezeichnet wird.

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

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

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLImageElement
Konstruktor
1. Image()
Instanzeigenschaften
Instanzmethoden
1. decode()
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLImageElement: height-Eigenschaft

In diesem Artikel

Wert

Beispiele

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN