Baseline Widely available
Die HTMLImageElement Eigenschaft srcset ist ein String, der einen oder mehrere Bildkandidaten-Strings identifiziert, getrennt durch Kommata (,), die jeweils Bildressourcen spezifizieren, die unter bestimmten Umständen verwendet werden sollen.
Jeder Bildkandidat-String enthält eine Bild-URL und einen optionalen Breiten- oder Pixeldichte-Deskriptor, der angibt, unter welchen Bedingungen dieser Kandidat anstelle des durch die src-Eigenschaft spezifizierten Bildes verwendet werden soll.
Die srcset-Eigenschaft, zusammen mit der sizes-Eigenschaft, ist ein wesentlicher Bestandteil beim Design responsiver Webseiten, da sie zusammen verwendet werden können, um Seiten zu erstellen, die für die jeweilige Darstellungssituation geeignete Bilder verwenden.
Hinweis: Wenn das srcset-Attribut Breiten-Deskriptoren verwendet, muss auch das sizes-Attribut vorhanden sein, andernfalls wird das srcset selbst ignoriert.
Ein String, der eine kommagetrennte Liste von einem oder mehreren Bildkandidaten-Strings enthält, die verwendet werden, um zu bestimmen, welche Bildressource innerhalb des <img>-Elements dargestellt werden soll, das durch das HTMLImageElement repräsentiert wird.
Jeder Bildkandidat-String muss mit einer gültigen URL beginnen, die eine nicht-interaktive Grafikressource referenziert. Dies wird gefolgt von einem Leerraum und dann einem Bedingungs-Deskriptor, der die Umstände angibt, unter denen das angegebene Bild verwendet werden sollte. Leerzeichen, mit Ausnahme derjenigen, die die URL und den entsprechenden Bedingungs-Deskriptor trennen, werden ignoriert; dies schlieÃt sowohl führende und nachfolgende Leerzeichen als auch Leerzeichen vor oder nach jedem Komma ein.
Der Bedingungs-Deskriptor kann eine von zwei Formen annehmen:
450w. Die angegebene Breite muss eine positive, nicht null, ganze Zahl sein und muss mit der intrinsischen Breite des referenzierten Bildes übereinstimmen. Wenn ein srcset "w"-Deskriptoren enthält, verwendet der Browser diese Deskriptoren zusammen mit dem sizes-Attribut, um eine Ressource auszuwählen.2x oder 2.0x angeben.Wenn der Bedingungs-Deskriptor nicht angegeben wird (mit anderen Worten, der Bildkandidat liefert nur eine URL), wird dem Kandidaten ein Standard-Deskriptor von "1x" zugewiesen.
"images/team-photo.jpg, images/team-photo-retina.jpg 2x"
Dieser String bietet Versionen eines Bildes sowohl für die Standard-Pixeldichte (nicht beschrieben, Standardwert 1x zugewiesen) als auch für die doppelte Pixeldichte (2x) an.
Wenn das srcset eines Bildelements "x"-Deskriptoren enthält, betrachten Browser auch die URL im src-Attribut (falls vorhanden) als Kandidaten und weisen ihr einen Standard-Deskriptor 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 Benutzeragent-Renderer ein Bild mit einer Breite von 640px, 960px oder 1024px benötigt.
Beachten Sie, dass, wenn eine Ressource in einem srcset mit einem "w"-Deskriptor beschrieben ist, alle Ressourcen innerhalb dieses srcset ebenfalls mit "w"-Deskriptoren beschrieben werden müssen und das src des Bildelements nicht als Kandidat betrachtet wird.
Das untenstehende HTML gibt an, dass die Standardbildressource, die im src-Attribut enthalten ist, für 1x-Anzeigen verwendet werden sollte und dass eine 400-Pixel-Version (im srcset enthalten und mit einem 2x-Deskriptor zugewiesen) für 2x-Anzeigen verwendet werden sollte.
<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>
Das CSS spezifiziert, dass das Bild und sein umgebendes Rechteck 200 Pixel im Quadrat sein und einen einfachen Rahmen darum haben sollten. Ebenfalls angegeben wird das word-break-Attribut, das den break-all-Wert verwendet, um dem Browser mitzuteilen, den String innerhalb der verfügbaren Breite umzubrechen, unabhängig davon, wo im String der Umbruch erfolgen muss.
.box {
width: 200px;
border: 2px solid rgb(150 150 150);
padding: 0.5em;
word-break: break-all;
}
.box img {
width: 200px;
}
Der folgende Code wird innerhalb eines Handlers für das window's load-Ereignis ausgeführt. Er verwendet die currentSrc-Eigenschaft des Bildes, um die vom Browser aus dem srcset ausgewählte URL abzurufen und anzuzeigen.
window.addEventListener("load", () => {
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);
});
Im unten angezeigten Ergebnis wird die ausgewählte URL je nach Anzeige entweder die 1x- oder die 2x-Version des Bildes widerspiegeln. Wenn Sie sowohl Standard- als auch Hochauflösungsanzeigen haben, versuchen Sie, dieses Fenster zwischen ihnen hin und her zu bewegen und die Seite neu zu laden, um die Ergebnisse zu sehen, die sich ändern.
Für weitere Beispiele sehen Sie sich unseren Leitfaden zu responsiven Bildern an.
Spezifikationen Browser-Kompatibilität Siehe auchRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4