Baseline Widely available
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 den Bildschirm oder einen Drucker gezeichnet oder gerendert wird; andernfalls ist es die natürliche, an die Pixeldichte angepasste Höhe des Bildes.
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.
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="/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.
Spezifikationen Browser-Kompatibilität Siehe auchRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4