Mehrere Anzeigenflächenbreiten angeben

Katie Hempenius
Katie Hempenius
X

Demo ausprobieren

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild

  • App in unterschiedlich großen Browserfenstern aktualisieren, um die Browserlast zu sehen unterschiedliche Bilder und unterschiedliche Layouts in verschiedenen Browsergrößen verwenden.

Code ansehen

  • Rufe index.html auf, 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 1.024 Pixeln und 800 Pixeln auf Bildschirmen mit einer Breite von mehr als 1.024 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 verschiedene 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-width oder min-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 srcset spielt keine Rolle.

  • Die Anzeigenflächenbreite kann mit einer Vielzahl von Einheiten angegeben werden. Im Folgenden finden Sie gültige Breiten:

  • 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)