HTMLImageElement: width Eigenschaft

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, z. B. auf einen Bildschirm oder Drucker:

• Wenn das Bild auf ein visuelles Medium gerendert wird, wird die Breite in CSS-Pixeln ausgedrückt.
• Wenn das Bild nicht auf ein visuelles Medium gerendert wird, wird seine Breite durch die natürliche (intrinsische) Breite des Bildes dargestellt, angepasst an die Anzeigedichte, wie durch naturalWidth angegeben.

Beispiele

In diesem Beispiel werden zwei verschiedene Größen für ein Bild einer Uhr mit dem srcset Attribut bereitgestellt. Eines ist 200px breit und das andere ist 400px breit. Das sizes Attribut wird verwendet, um die Breite anzugeben, mit der das Bild bei gegebener Breite des Viewports gezeichnet werden sollte.

HTML

Für Viewports bis zu 400px Breite wird das Bild mit einer Breite von 200px gezeichnet. Andernfalls wird es mit 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

JavaScript betrachtet die width Eigenschaft, um die momentane Breite des Bildes zu bestimmen. Dies wird in den load und resize Ereignishandlern des Fensters durchgeführt, sodass immer die aktuellsten Breiteninformationen verfügbar sind.

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

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

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

Ergebnis

Dieses Beispiel könnte leichter zu versuchen sein in its own window.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTMLCanvasElement.width
• HTMLEmbedElement.width
• HTMLIFrameElement.width
• HTMLObjectElement.width
• HTMLSourceElement.width
• HTMLVideoElement.width