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 Interface 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, das an erster Stelle stehen muss. Weitere Informationen zur Syntax des sizes-Attributs finden Sie unter <img>.

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

Wert

Ein aus durch Kommas getrennten Quellgrößen bestehender String, oder der leere String "", falls nicht angegeben.

Beispiele

Angenommen, das folgende <link>-Element:

html

<link
  rel="preload"
  as="image"
  imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
  imagesizes="(max-width: 400px) 200px, (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;
}

… wir können 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

HTMLLinkElement: imageSizes-Eigenschaft

Wert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch