HTML/Attribute/sizes
Aus SELFHTML-Wiki
Der Titel dieses Artikels ist mehrdeutig. sizes (engl. für Größen) gibt es:
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) |
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) 33%,
(min-width: 25em) 50%,
100%">
Beachten Sie: Wenn das srcset-Attribut fehlt oder keine gültigen Angaben eines
w
-Werts hat, hat das sizes
-Attribut keine Auswirkungen.Siehe auch
- HTML/Tutorials/Bilder im Internet/responsive Bilder (Gestaltung mit sizes)
Weblinks
- W3C: sizes attribute
25em
wird die Grafik auf 50% der Viewport-Breite begrenzt.50em
nimmt sie nur noch ein Drittel der Breite ein.