Art Direction

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
  • Aktualisieren Sie die App mit unterschiedlichen Browsergrößen. Achten Sie darauf, wie unterschiedlich die Bilder unterscheiden sich nicht nur durch die Größe, sondern auch durch Zuschnitte und Seitenverhältnissen.

Was passiert hier?

Art Direction mit unterschiedlichen Bildern für verschiedene Displaygrößen.

Bei einem responsiven Bild wird dasselbe Bild in verschiedenen Größen geladen. Art Direction noch einen Schritt weiter und werden je nach Display.

Verwenden Sie Art Direction, um die visuelle Präsentation zu verbessern. Die verschiedenen Bildzuschnitte in dieser Demo stellen sicher, dass der POI (die Blume) werden unabhängig vom Display immer detailliert dargestellt. Die Vorteile von Art Direction sind: rein ästhetisch. Es bietet im Vergleich zu responsiven Bildern keinen Leistungsvorteil.

Code ansehen

  • Rufe index.html auf, um den Art Direction-Code für diese Demo anzusehen.

Funktionsweise des Codes

Art Direction verwendet die <picture>, <source> und <img>-Tags.

Bild

Das <picture>-Tag bietet einen Wrapper für null oder mehrere <source>-Tags und ein <image>-Tag.

source

Das Tag <source> gibt eine Medienressource an.

Der Browser verwendet das erste <source>-Tag mit einer Medienabfrage. das "true" zurückgibt. Wenn keine der Medienabfragen übereinstimmt, der Browser auf das Laden des in <img> angegebenen Bildes zurückgreift. -Tag zu laden.

img

Mit dem Tag <img> funktioniert dieser Code in Browsern, das <picture>-Tag unterstützen.

Wenn ein Browser das <picture>-Tag nicht unterstützt, wird der das vom <img>-Tag angegebene Bild.