Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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

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