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 vorgeladenen 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 setzen.

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 beinhaltet eine Medienbedingung, die Größe des Bildes als <length> oder das Schlüsselwort auto, das als erstes kommen muss. Für weitere Informationen zur Syntax des sizes-Attributs siehe <img>.

Die imagesrcset- und imagesizes-Attribute sind nur bei <link>-Elementen relevant, die sowohl ein rel-Attribut auf preload gesetzt als auch das as-Attribut auf image gesetzt haben.

Wert

Ein String, der aus kommagetrennten Quellgrößen besteht, oder der leere String "", wenn nicht angegeben.

Beispiele

Gegeben sei 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;
}

…kann man 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