HTML <picture> Tag
Exemple
Comment utiliser la balise <picture> :
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Fleurs" style="width:auto;">
</picture> Définition et Utilisation
La balise <picture> offre aux développeurs web une plus grande flexibilité dans la spécification des ressources d'image.
L'utilisation la plus courante de l'élément <picture> est pour la direction artistique dans les conceptions réactives. Au lieu d'avoir une seule image qui est agrandie ou réduite en fonction de la largeur de la fenêtre d'affichage, plusieurs images peuvent être conçues pour remplir plus harmonieusement la fenêtre du navigateur.
L'élément <picture> contient deux balises : une ou plusieurs balises <source> et une balise <img> .
Le navigateur recherchera le premier élément <source> dont la requête média correspond à la largeur actuelle de la fenêtre d'affichage, puis affichera l'image appropriée (spécifiée dans l'attribut srcset). L'élément <img> est requis en tant que dernier enfant de l'élément <picture> , comme option de secours si aucune des balises source ne correspond.
Conseil : L'élément <picture> fonctionne de manière similaire à <video> et <audio>. Vous configurez différentes sources, et la première source qui correspond aux préférences est celle qui est utilisée.
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend en charge pleinement l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Attributs Globaux
La balise <picture> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La balise <picture> prend également en charge les Attributs d'Événement en HTML .
Pages Associées
Tutoriel HTML : Élément HTML <picture>
Tutoriel CSS : Design Réactif CSS - Images