HTMLImageElement: width-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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.

In diesem Artikel

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 naturalWidth angegeben.

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.

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="(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.

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

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

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLImageElement
Konstruktor
1. Image()
Instanzeigenschaften
Instanzmethoden
1. decode()
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLImageElement: width-Eigenschaft

In diesem Artikel

Wert

Beispiele

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN