Referenz:HTML/Attribute/sizes

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig. Das link-Element kennt ein weiteres sizes-Attribut.
Das ähnlich klingende Attribut size bestimmt die Anzeigegröße einer select-Liste.



Attribut sizes
Beschreibung ermöglicht mehrere Bildquellen nach Medienmerkmalen (media condition) unterschiedlich anzeigen.
erlaubte Werte

eine durch Komma getrennten Liste von

Beachten Sie: Die letzte Breitenangabe darf kein Medienmerkmal besitzen.
default-Wert
anwendbar auf img, source (in einem picture-Element) (Unterschied Tag Element Attribut)
Browsersupport
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Spezifikation W3c logo klein.gif sizes attribute
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%">

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 in einem 2-spaltigen Layout auf 50vw der Breite begrenzt (Die Einheit vw bezieht sich auf die Breite des Viewports).
  • 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.

Tipp
Beachten Sie: Die Angaben beziehen sich ausschließlich auf HTML5, zu früheren HTML-Versionen kann es deutliche Unterschiede geben.