Mehrere Anzeigenflächenbreiten angeben

Katja Hempenius
Katie Hempenius
X

Diese Demo ausprobieren

  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.

  • Aktualisieren Sie die App in Browserfenstern unterschiedlicher Größe, um zu sehen, wie der Browser unterschiedliche Bilder lädt und unterschiedliche Layouts in unterschiedlichen Browsergrößen verwendet.

Code ansehen

  • Rufen Sie index.html auf, um den entsprechenden Code zu erhalten:
<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

Was passiert hier?

Der Wert des Attributs sizes gibt an, dass die Anzeigebreite des Bildes so lautet: „100% der Breite des Darstellungsbereichs“ bei Darstellungsbereichen mit einer Breite von bis zu 480 Pixel, „50% der Breite des Darstellungsbereichs“ bei Bildschirmen mit einer Breite von 481 bis 1.024 Pixel und 800 Pixel auf Bildschirmen, die breiter als 1.024 Pixel sind. Diese Breiten stimmen mit den im CSS angegebenen Werten überein.

Die Möglichkeit, mehrere Anzeigenflächenbreiten anzugeben, gilt auch für Seitenlayouts, die unterschiedliche Stile (d. h. Bildbreiten) für verschiedene Größen des Darstellungsbereichs verwenden.

Mehrere Anzeigenflächenbreiten angeben

  • Verwenden Sie eine durch Kommas getrennte Liste, um mehrere Anzeigenflächenbreiten anzugeben. Mit Ausnahme des letzten Listenelements besteht jedes Listenelement aus einer Medienbedingung (z.B. max-width oder min-width) und einer Anzeigenflächenbreite.
  • Das letzte Element in dieser Liste ist die Standardbreite der Anzeigenfläche. Dies ist die Standardeinstellung, sodass Sie keine Medienbedingung angeben müssen.
  • Sie können beliebig viele Slotbreiten angeben. Die Anzahl der in srcset aufgeführten Images spielt keine Rolle.

  • Die Breite der Anzeigenfläche kann mit verschiedenen Einheiten angegeben werden. Folgende Breiten sind zulässig:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

Die folgende Breite ist ungültig:

  • 25% (Prozentangaben können nicht zusammen mit dem Attribut „Größen“ verwendet werden)