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 unterschiedlicher Größe neu, um zu sehen, ob der Browser bei unterschiedlichen Browsergrößen unterschiedliche Bilder lädt und unterschiedliche Layouts verwendet.
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, wie breit das Bild angezeigt werden soll: „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. Diese Breiten stimmen mit den im CSS angegebenen Breiten überein.
Da Sie mehrere Steckplatzbreiten angeben können, können Sie Seitenlayouts erstellen, die für unterschiedliche Darstellungsbereiche unterschiedliche Stile (d. h. Bildbreiten) verwenden.
Mehrere Steckplatzbreiten angeben
- Verwenden Sie eine durch Kommas getrennte Liste, um mehrere Anzeigenflächenbreiten anzugeben. Jedes Listenelement mit Ausnahme des letzten besteht aus einer Medienbedingung (z.B.
max-widthodermin-width) und einer Slotbreite. - Der letzte Eintrag in dieser Liste ist die Standardbreite des Slots. Dies ist die Standardeinstellung. Sie müssen also keine Medienbedingung angeben.
- Sie können beliebig viele Anzeigenflächenbreiten angeben. Die Anzahl der in
srcsetaufgeführten Bilder spielt keine Rolle. Die Steckplatzbreite kann in verschiedenen Einheiten angegeben werden. Folgende Breiten sind zulässig:
100px33vw20emcalc(50vw-10px)
Die folgende Breite ist ungültig:
25%(Prozentsätze können nicht mit dem Attribut „Größen“ verwendet werden)