HTMLImageElement: width-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 width-Eigenschaft der HTMLImageElement-Schnittstelle gibt die Breite 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, an die Pixeldichte angepasste Breite des Bildes.
Wert
Ein ganzzahliger Wert, der die Breite des Bildes angibt. Die Art und Weise, wie die Breite definiert ist, 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 Breite in CSS-Pixel angegeben.
- Andernfalls wird die Breite des Bildes unter Verwendung seiner natürlichen (intrinsischen) Breite dargestellt, angepasst an die Anzeigedichte, wie durch
naturalWidthangegeben.
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. 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
Für Viewports bis zu einer Breite von 400px wird das Bild in einer Breite von 200px gezeichnet. Andernfalls wird es in 400px gezeichnet.
<p>Image width: <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, 400px" />
JavaScript
Der JavaScript-Code betrachtet die height, um die Höhe des Bildes angesichts der Breite, in der es derzeit gezeichnet wird, zu bestimmen.
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");
const updateWidth = () => {
output.innerText = clockImage.width;
};
updateWidth();
window.addEventListener("resize", updateWidth);
Ergebnis
Dieses Beispiel ist möglicherweise einfacher in its own window auszuprobieren.
Spezifikationen
| Specification |
|---|
| HTML # dom-img-width-dev |