Die Praxis

Wie sieht das nun in der Praxis aus?

Drei Versionen unseres Bildes

  • large.jpg (1024 x 768)
  • medium.jpg (640 x 480)
  • small.jpg (320 x 240)

... und stellen uns vor, wir haben in unserem Design einen Breakpoint bei 736px, an dem unser Grundgerüst von einspaltig zu dreispaltig wechselt.

Das Markup würde dann folgendermaßen aussehen:

<img src="small.jpg"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg 320w"
     sizes="(min-width: 736px) 33.3vw,
            100vw"
     alt="mein schönes Bild" />

  • src = Standardgrafik, Fallback
  • srcset = Liste an Bildquellen, die zur Verfügung stehen
  • Der w-Wert beschreibt hierbei die physikalische Breite des Bildes in Pixeln. Er muss manuell angegeben werden, da der Browser die Breite des Bildes nicht weiss.
  • sizes = legt fest, wie breit die Grafik dargestellt werden soll.
  • sizes beschreibt auch die Rahmenbedingungen der Darstellung; Neben der Einheit vw sind auch alle anderen CSS-Einheiten wie px, em und die calc()-Funktion möglich.
merken
Nicht mehr merken
X

Sie haben den Inhalt der Merkliste hinzugefügt.