CSS/Funktionen/image-set()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die image-set()-Funktion ist eine Methode, mit der der Browser das am besten geeignete CSS-Bild aus einem gegebenen Satz auswählen kann, hauptsächlich für Bildschirme mit hoher Pixeldichte. Damit ist es ein Pendant zum srcset-Attribut für img und picture.

Sie stellt eine Reihe von Bildoptionen - jeweils mit einer zugehörigen Auflösungsangabe - bereit, aus denen der Browser die für das Gerät und die Einstellungen am besten geeignete auswählt. Die Auflösung kann als Proxy für die Dateigröße verwendet werden - ein User-Agent auf einer langsamen mobilen Verbindung mit einem hochauflösenden Bildschirm zieht es möglicherweise vor, Bilder mit geringerer Auflösung zu erhalten, anstatt auf das Laden eines Bildes mit höherer Auflösung zu warten..

Parameter
  • url() der Ressource.
  • x oder dppx (dots per pixel) für die Auflösung (optional)
  • type(<string>), der Typ z. B. "image/jpeg"
anwendbar auf * background
Browsersupport caniuse: {{{caniuse}}}
Beispiel
.box {
  background-image: url("large-balloons.jpg");  /* Fallback */
  background-image: -webkit-image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
  background-image: image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
}
Als Fallback wird background-image ein „klassischer“ Wert zugewiesen.

Ein zweiter Regelsatz enthält jeweils …

  • drei url()-Funktionen für Hintergrundbilder,
  • die als zweiten Parameter einen x-Wert für die Auflösung erhalten.


Weblinks

Siehe auch