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-Pixeln, wenn das Bild auf einem visuellen Medium wie dem Bildschirm oder einem Drucker dargestellt wird; andernfalls ist es die natürliche, an die Pixeldichte angepasste Höhe des Bildes.
Wert
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 angegeben.
- Andernfalls wird die Höhe des Bildes unter Verwendung seiner natürlichen (intrinsischen) Höhe dargestellt, angepasst an die Display-Dichte, wie durch die
naturalHeightangezeigt.
Beispiele
In diesem Beispiel werden zwei verschiedene Größen für ein Bild einer Uhr unter Verwendung des srcset-Attributs bereitgestellt. Eine ist 200px breit und die andere ist 400px breit. Außerdem wird das sizes-Attribut bereitgestellt, um die Breite anzugeben, in der das Bild gezeichnet werden soll, abhängig von der Breite des Viewports.
HTML
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="/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, basierend auf der Breite, in der es derzeit 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 ist möglicherweise leichter auszuprobieren in seinem eigenen Fenster.
Spezifikationen
| Specification |
|---|
| HTML # dom-img-height-dev |
Browser-Kompatibilität
Loading…