HTMLImageElement: width Eigenschaft

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 auf einem visuellen Medium dargestellt wird:

• Wenn das Bild auf einem visuellen Medium dargestellt wird, wird die Breite in CSS-Pixeln angegeben.
• Wenn das Bild nicht auf einem visuellen Medium dargestellt wird, wird seine Breite unter Verwendung der natürlichen (intrinsischen) Breite des Bildes dargestellt, angepasst an die Darstellungsdichte wie durch naturalWidth angegeben.

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

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/Element/img/clock-demo-200px.png"
  alt="Clock"
  srcset="
    /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
    /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
  "
  sizes="(max-width: 400px) 200px, 400px" />

JavaScript betrachtet die width Eigenschaft, um die aktuelle Breite des Bildes zu bestimmen. Dies wird in den Event-Handlern load und resize des Fensters durchgeführt, sodass immer 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);

Dieses Beispiel ist möglicherweise leichter auszuprobieren in its own window.

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