Mehrere Anzeigenflächenbreiten angeben

Katie Hempenius

Demo ausprobieren

• Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild .

• Laden Sie die App in Browserfenstern mit unterschiedlicher Größe neu, um zu sehen, wie im Browser verschiedene Bilder geladen werden und verschiedene Layouts in unterschiedlichen Browsergrößen verwendet werden.

Code ansehen

• Den Code, der dies ermöglicht, findest du unter index.html:

<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 Bildbreite „100 % der Viewport-Breite“ auf Viewports mit einer Breite von bis zu 480 Pixeln, „50 % der Viewport-Breite“ auf Bildschirmen mit einer Breite von 481 bis 1.024 Pixeln und 800 Pixel auf Bildschirmen mit einer Breite von mehr als 1.024 Pixeln beträgt. Diese Breiten stimmen mit den im CSS angegebenen Breiten überein.

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

Mehrere Steckplatzbreiten angeben

• Verwenden Sie eine durch Kommas getrennte Liste, um mehrere Breiten für Anzeigenflächen anzugeben. Jedes Listenelement mit Ausnahme des letzten besteht aus einer Medienbedingung (z. B. max-width oder min-width) und einer Slotbreite.
• Das letzte Element in dieser Liste ist die Standardbreite der Anzeigenfläche. Dies ist die Standardeinstellung. Sie müssen also keine Medienbedingung angeben.
• Sie können beliebig viele Anzeigenflächenbreiten angeben. Die Anzahl der in srcset aufgeführten Bilder spielt keine Rolle.

• Die Anzeigenflächenbreite kann mit einer Vielzahl von Einheiten angegeben werden. Folgende Breiten sind zulässig:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

Die folgende Breite ist ungültig:

• 25% (Prozentsätze können nicht mit dem Attribut „Größen“ verwendet werden)