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 July 2015.

Die width-Eigenschaft des HTMLImageElement-Interfaces gibt die Breite an, mit der ein Bild in CSS-Pixeln gezeichnet wird, wenn es in einem visuellen Medium wie einem Bildschirm oder Drucker dargestellt 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 wird, hängt davon ab, ob das Bild in einem visuellen Medium gerendert wird oder nicht, wie z.B. ein Bildschirm oder Drucker:

Wenn das Bild in einem visuellen Medium gerendert wird, wird die Breite in CSS-Pixeln ausgedrückt.
Wenn das Bild nicht in einem visuellen Medium gerendert wird, wird seine Breite unter Verwendung der natürlichen (intrinsischen) Breite des Bildes dargestellt, angepasst an die Anzeigedichte, wie durch naturalWidth angezeigt.

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. Das sizes-Attribut wird verwendet, um die Breite anzugeben, mit der das Bild gezeichnet werden sollte, basierend auf der Breite des Viewports.

HTML

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

html

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

JavaScript

JavaScript überprüft die width-Eigenschaft, um die Breite des Bildes im aktuellen Moment zu bestimmen. Dies erfolgt in den load- und resize-Ereignishandlern des Fensters, sodass stets die aktuellsten Breiteninformationen verfügbar sind.

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

const updateWidth = (event) => {
  output.innerText = clockImage.width;
};

window.addEventListener("load", updateWidth);
window.addEventListener("resize", updateWidth);

Ergebnis

Dieses Beispiel lässt sich möglicherweise einfacher in einem eigenen Fenster ausprobieren.

Spezifikationen

Specification
HTML # dom-img-width-dev