Balise HTML <image>
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="Flowers" style="width:auto;">
</picture>
Définition et utilisation
La <picture>balise donne aux développeurs Web plus de flexibilité dans la spécification des ressources d'image.
L'utilisation la plus courante de l' <picture>élément sera la direction artistique dans les conceptions réactives. Au lieu d'avoir une image agrandie ou réduite en fonction de la largeur de la fenêtre d'affichage, plusieurs images peuvent être conçues pour mieux remplir la fenêtre d'affichage du navigateur.
L' <picture>élément contient deux balises : une ou plusieurs
balises <source> et une balise <img> .
Le navigateur recherchera le premier élément <source> où la requête multimédia correspond à la largeur de la fenêtre d'affichage actuelle, puis il 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' <picture>élément, en tant qu'option de secours si aucune des balises source ne correspond.
Conseil : L' <picture>élément 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.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Attributs globaux
La <picture>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <picture>balise prend également en charge les attributs d'événement en HTML .
Pages connexes
Tutoriel HTML : élément HTML <picture>
Tutoriel CSS : CSS Responsive Design - Images