Demo ausprobieren
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann
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.htmlauf, 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.