HTMLImageElement: height-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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.
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
naturalHeightangegeben.
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.
<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.
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");
const updateHeight = () => {
output.innerText = clockImage.height;
};
updateHeight();
window.addEventListener("resize", updateHeight);
Ergebnis
Dieses Beispiel lässt sich möglicherweise leichter in its own window ausprobieren.
Spezifikationen
| Specification |
|---|
| HTML # dom-img-height-dev |