HTML/Attribute/sizes

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das sizes-Attribut ermöglicht es dem Browser zu entscheiden, welche Bildquellen der mit srcset angegebenen Alternativen nach Medienmerkmalen (media condition) er laden soll.

erlaubte Werte

eine durch Komma getrennten Liste von

Beachten Sie: Die letzte Breitenangabe darf kein Medienmerkmal besitzen.
default-Wert
erlaubt in img, source (in einem picture-Element)
Browsersupport Details bei caniuse.com: {{{caniuse}}}
Beispiel
<img src="Monumentvalley-gross.jpg"
     alt="Panorama Monument Valley - Quelle Wikipedia"
     srcset="Monumentvalley-klein.jpg 600w, 
             Monumentvalley-mittel.jpg 1200w, 
             Monumentvalley-gross.jpg 1920w"
     sizes="(min-width: 50em) 33vw,
            (min-width: 25em) 50vw,
            100vw">
In diesem Beispiel werden mit dem sizes-Attribut die je nach Medien-Merkmal unterschiedliche Breite angegeben.
  • Auf schmalen Bildschirmen nimmt die Grafik die gesamte Breite ein.
  • Ab einer Viewport-Breite von 25em wird die Grafik auf 50% der Viewport-Breite begrenzt.
  • Bei großen Bildschirmen ab 50em nimmt sie nur noch ein Drittel der Breite ein.
Beachten Sie: Wenn das srcset-Attribut fehlt oder keine gültigen Angaben eines w-Werts hat, hat das sizes-Attribut keine Auswirkungen.
Empfehlung: Prozentangaben sind in einem <source-size-value> nicht erlaubt, um Verwirrung darüber zu vermeiden, worauf sich die Größe bezieht. Die Einheit "vw" kann für Größen relativ zur Breite des Ansichtsfensters verwendet werden.

Siehe auch

Weblinks