Demo ausprobieren
Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild
App in unterschiedlich großen Browserfenstern aktualisieren, um die Browserlast zu sehen unterschiedliche Bilder und unterschiedliche Layouts in unterschiedlichen Browsergrößen verwenden.
Code ansehen
- Rufe
index.htmlauf, um den Code aufzurufen, der dies ermöglicht:
<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 vor, dass die Bildbreite so breit ist:
„100% der Breite des Darstellungsbereichs“ bei Darstellungsbereichen mit einer Breite von bis zu 480 Pixeln, „50% des Darstellungsbereichs
Breite“ auf Bildschirmen mit einer Breite von 481 bis 1024 Pixeln und 800 Pixeln auf Bildschirmen mit einer Breite von mehr als 1024 Pixeln. Diese
mit der im CSS angegebenen Breite übereinstimmen.
Die Möglichkeit, mehrere Anzeigenflächenbreiten anzugeben, ist für Seitenlayouts geeignet, die verschiedene Stile (d. h. Bildbreiten) für unterschiedliche Größen des Darstellungsbereichs verwenden.
So geben Sie mehrere Breiten für Anzeigenflächen an
- Verwenden Sie eine durch Kommas getrennte Liste, um mehrere Breiten für Anzeigenflächen anzugeben. Jedes Listenelement
mit Ausnahme des letzten Elements, besteht aus einer Medienbedingung (z.B.
max-widthodermin-width) und die Breite der Anzeigenfläche. - Das letzte Element in dieser Liste ist die Standardbreite der Anzeigenfläche. Das ist die Standardeinstellung. müssen Sie keine Medienbedingung angeben.
- Sie können beliebig viele Anzeigenflächenbreiten auflisten. Die Anzahl der Images, die in
srcsetspielt keine Rolle. Die Anzeigenflächenbreite kann mit einer Vielzahl von Einheiten angegeben werden. Im Folgenden finden Sie gültige Breiten:
100px33vw20emcalc(50vw-10px)
Die folgende Breite ist ungültig:
25%(Prozentangaben können nicht mit dem Attribut „Größen“ verwendet werden)