HTMLLinkElement: imageSizes-Eigenschaft

Baseline 2023

Newly available

Since ⁨December 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die imageSizes-Eigenschaft des HTMLLinkElement-Interfaces gibt die Größe und Bedingungen für die vorab geladenen Bilder an, die durch die imageSrcset-Eigenschaft definiert sind. Sie spiegelt den Wert des imagesizes-Attributs des <link>-Elements wider. Diese Eigenschaft kann den Wert des imagesizes-Attributs abrufen oder festlegen.

Das imagesizes-Attribut des <link>-Elements ist dasselbe wie das sizes-Attribut des <img>-Elements: eine durch Kommas getrennte Liste von Quellgrößen. Jede Quellgröße enthält eine Medienbedingung, die Größe des Bildes als <length>, oder das Schlüsselwort auto, welches zuerst kommen muss. Weitere Informationen zur Syntax des sizes-Attributs finden Sie unter <img>.

Die Attribute imagesrcset und imagesizes sind nur für <link>-Elemente relevant, die sowohl ein rel-Attribut auf preload als auch ein as-Attribut auf image gesetzt haben.

Wert

Ein String, der aus durch Kommas getrennten Quellgrößen besteht, oder der leere String "", wenn kein Wert angegeben ist.

Beispiele

Gegeben das folgende <link>-Element:

html

<link
  rel="preload"
  as="image"
  imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
  imagesizes="(width < 400px) 200px, (400px <= width < 600px) 75vw, 50vw" />

<pre id="log"></pre>

#log {
  padding: 0 0.25rem;
  font-size: 1.2em;
  line-height: 1.4;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

…können wir den Wert des imagesizes-Attributs mit der imageSizes-Eigenschaft abrufen und aktualisieren:

const link = document.querySelector("link");
log(`Original: ${link.imageSizes}`);

// Change the value
link.imageSizes = "50vw";
log(`Updated: ${link.imageSizes}`);

Spezifikationen

Specification
HTML # dom-link-imagesizes

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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