HTML <picture>Élément
Exemples
Afficher différentes images selon différentes tailles d'écran ; si aucune correspondance n'est trouvée ou si le navigateur ne prend pas en charge l'élément picture, l'élément img est utilisé :
Essayez-le vous-même »
Définition
L'élément picture permet d'afficher différentes images sur différents appareils et est généralement utilisé pour la conception adaptative.
HTML5 a introduit l'élément <picture>, ce qui rend l'ajustement des ressources d'images plus flexible.
L'élément <picture> contient zéro ou plusieurs éléments <source> et un élément <img>. Chaque élément <source> correspond à un appareil différent et référence une source d'image différente. S'il n'y a pas de correspondance, l'URL dans l'attribut src de l'élément <img> est sélectionnée.
Remarque :<img>The element is placed after the last<picture>element; if the browser does not support this attribute, the image of the <img> element is displayed.
Prise en charge des navigateurs
Les nombres du tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Différences entre HTML 4.01 et HTML5
L'élément <picture> est nouvellement défini dans HTML5.
Attributs globaux
La balise <picture> prend en chargeles attributs globaux HTML.。
Attributs d'événement
La balise <picture> prend en chargeles attributs d'événements HTML.。
Autres extensions