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é :

<picture> <source media="(min-width: 650px)" srcset="demo1.jpg"> <source media="(min-width: 465px)" srcset="demo2.jpg"> <img src="img_girl.jpg"> </picture>

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