Balise HTML <picture>

Définition et utilisation

<picture> Les balises permettent aux développeurs web d'être plus flexibles lors de la spécification des ressources d'images.

<picture> L'utilisation la plus courante de l'élément est dans le design réactif pour l'orientation artistique. Il est possible de concevoir plusieurs images pour mieux remplir la fenêtre de visualisation du navigateur, plutôt que de faire une image agrandir ou réduire proportionnellement selon la largeur de la fenêtre de visualisation.

<picture> Les éléments contiennent deux balises : une ou plusieurs <source> balise et un <img> balise.

Le navigateur recherche le premier élément <source> correspondant à l'interrogation de média de la largeur actuelle de la fenêtre de visualisation, puis il affiche l'image correcte (spécifiée dans l'attribut srcset). L'élément <img> agit comme <picture> L'élément enfant final de l'élément est obligatoire et sert de option de secours lorsque aucun balise source ne correspond.

Astuce :<picture> Le fonctionnement des éléments <video> et <audio> Similaire. Vous pouvez configurer différentes sources, la première source correspondant aux préférences sera utilisée.

Veuillez également consulter :

Tutoriel HTML :Élément <picture> HTML

Tutoriel CSS :Conception réactive CSS - Images

Exemple

<picture> Méthode d'utilisation de la balise :

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Essayez-le vous-même

Attributs globaux

<picture> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<picture> Les balises prennent également en charge Attributs d'événement dans HTML.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge le premier cette balise.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0