Essayer cette démonstration
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur
Plein écran
- Actualisez l'application avec différentes tailles de navigateur. Remarquez à quel point les images sont différentes sont non seulement de tailles différentes, mais aussi de recadrages et et différents formats.
Que se passe-t-il ?
Direction artistique affiche différentes images sur différentes tailles d'écran.
Une image responsive charge différentes tailles de la même image. La direction artistique prend des images complètement différentes en fonction l'écran.
Utiliser la direction artistique pour améliorer la présentation visuelle. Par exemple, les différents Dans cette démonstration, les recadrages d'images permettent de s'assurer que le point d'intérêt (la fleur) toujours affiché en détail, quel que soit l'écran. Les avantages de Art Direction sont purement esthétiques ; il n'offre aucun avantage en termes de performances par rapport aux images responsives.
Afficher le code
- Affichez
index.htmlpour voir le code de direction artistique de cette démonstration.
Fonctionnement du code
La direction artistique utilise
<picture>,
<source>,
et <img>.
image
Le tag <picture> fournit un wrapper pour zéro, une ou plusieurs balises <source> et un tag <image>.
source
Le tag <source> spécifie une ressource multimédia.
Le navigateur utilise le premier tag <source> avec une requête média.
qui renvoie la valeur "true". Si aucune des requêtes média ne correspond,
le navigateur charge l'image spécifiée par <img>.
.
img
La balise <img> permet à ce code de fonctionner dans les navigateurs qui ne l'utilisent pas.
acceptent la balise <picture>.
Si un navigateur n'accepte pas la balise <picture>, il charge le
spécifiée par le tag <img>.