HTMLImageElement: srcset-Eigenschaft

Wert

Ein String, der eine kommaseparierte Liste von einem oder mehreren Bildkandidaten-Strings enthält, die verwendet werden, um zu bestimmen, welche Bildressource im <img>-Element, das durch das HTMLImageElement repräsentiert wird, angezeigt wird.

Jeder Bildkandidaten-String muss mit einer gültigen URL beginnen, die eine nicht interaktive Grafikressource referenziert. Darauf folgt ein Leerraum und dann ein Konditionsbeschreiber, der die Umstände angibt, unter denen das angegebene Bild verwendet werden soll. Leerzeichen, abgesehen von dem Leerraum, der die URL und den entsprechenden Konditionsbeschreiber trennt, werden ignoriert; dazu gehören sowohl führende als auch nachfolgende Leerzeichen sowie Leerzeichen vor oder nach jedem Komma.

Der Konditionsbeschreiber kann eine von zwei Formen annehmen:

• Um anzugeben, dass die Bildressource, die durch den Bildkandidaten-String angegeben ist, verwendet werden sollte, wenn das Bild mit einer bestimmten Breite in Pixeln gerendert wird, geben Sie einen Breitenbeschreiber an, der aus einer Zahl besteht, die diese Breite in Pixeln angibt, gefolgt von dem Kleinbuchstaben "w". Um beispielsweise eine Bildressource bereitzustellen, die verwendet werden soll, wenn der Renderer ein 450 Pixel breites Bild benötigt, verwenden Sie den Breitenbeschreiber-String 450w. Die angegebene Breite muss eine positive, ungleiche Null und ganze Zahl sein und muss der intrinsischen Breite des referenzierten Bildes entsprechen. Wenn ein srcset "w"-Beschreiber enthält, verwendet der Browser diese Beschreiber zusammen mit dem sizes-Attribut, um eine Ressource auszuwählen.
• Alternativ können Sie einen Pixeldichte-Beschreiber verwenden, der die Bedingung angibt, unter der die entsprechende Bildressource als Pixeldichte des Displays verwendet werden soll. Dies wird angegeben, indem die Pixeldichte als positiver, ungleich nuller Gleitkommawert gefolgt von dem Kleinbuchstaben "x" angegeben wird. Um zum Beispiel anzugeben, dass das entsprechende Bild verwendet werden soll, wenn die Pixeldichte doppelt so hoch ist wie die Standarddichte, können Sie den Pixeldichte-Beschreiber 2x oder 2.0x verwenden.

Wenn der Konditionsbeschreiber nicht angegeben wird (mit anderen Worten, der Bildkandidat liefert nur eine URL), wird dem Kandidaten ein Standardbeschreiber von "1x" zugewiesen.

"images/team-photo.jpg, images/team-photo-retina.jpg 2x"

Dieser String liefert Versionen eines Bildes, die bei der Standard-Pixeldichte (unangeschrieben, mit einem Standardwert von 1x) sowie bei doppelter Pixeldichte (2x) verwendet werden.

Wenn ein Bild-Element srcset "x"-Beschreiber enthält, berücksichtigen Browser auch die URL im src-Attribut (falls vorhanden) als Kandidaten und weisen ihr einen Standardbeschreiber von 1x zu.

"header640.png 640w, header960.png 960w, header1024.png 1024w"

Dieser String liefert Versionen eines Header-Bildes, die verwendet werden sollen, wenn der User-Agent-Renderer ein Bild mit einer Breite von 640px, 960px oder 1024px benötigt.

Beachten Sie, dass wenn in einem srcset irgendeine Ressource mit einem "w"-Beschreiber beschrieben wird, alle Ressourcen innerhalb dieses srcset ebenfalls mit "w"-Beschreibern beschrieben werden müssen und das Bild-Element's src nicht als Kandidat betrachtet wird.

Beispiele

HTML

Das untenstehende HTML gibt an, dass die Standardbildressource, die im src-Attribut enthalten ist, für 1x-Anzeigen verwendet werden soll und dass eine 400-Pixel-Version (im srcset enthalten und mit einem 2x-Beschreiber versehen) für 2x-Anzeigen verwendet werden soll.

<div class="box">
  <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-400px.png 2x
    " />
</div>

CSS

Das CSS gibt an, dass das Bild und sein umgebendes Box 200 Pixel groß sein sollen und eine einfache Umrandung haben sollen. Ebenfalls bereitgestellt ist das word-break-Attribut, das mit dem Wert break-all dem Browser mitteilt, den String unabhängig davon, wo im String der Umbruch erfolgen muss, innerhalb der verfügbaren Breite umzubrechen.

.box {
  width: 200px;
  border: 2px solid rgb(150 150 150);
  padding: 0.5em;
  word-break: break-all;
}

.box img {
  width: 200px;
}

JavaScript

Der folgende Code verwendet die currentSrc-Eigenschaft des Bildes, um die vom Browser aus dem srcset ausgewählte URL abzurufen und anzuzeigen.

const box = document.querySelector(".box");
const image = box.querySelector("img");

const newElem = document.createElement("p");
newElem.textContent = "Image: ";
newElem.appendChild(document.createElement("code")).textContent =
  image.currentSrc;
box.appendChild(newElem);

Ergebnis

Im unten gezeigten Ergebnis wird die ausgewählte URL entsprechend der Frage, ob Ihr Display die 1x- oder die 2x-Version des Bildes auswählt, übereinstimmen. Wenn Sie sowohl über Standardspeicherung als auch über hochdichte Displays verfügen, versuchen Sie, dieses Fenster dazwischen zu verschieben und die Seite neu zu laden, um die Änderung der Ergebnisse zu sehen.

Für zusätzliche Beispiele siehe unseren Leitfaden zu Responsive Images.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Bilder
• Responsive Images
• Leitfaden für Bilddateitypen und -formate