Balise PICTURE

Rôle

La balise <picture> est très utile pour faire du responsive design puisqu’elle permet de changer la source d’une image en fonction de la taille d’écran.

Elle fonctionne avec la balise <source> qui fournit la nouvelle image et l’instruction (média-queries) de taille d’écran minimum min-width

Testez vous-même cette balise

Utilisez Codepen.

See the Pen aELXYg by salsacobo (@salsacobo) on CodePen.

Affichage sur un écran  >768px :

 

Affichage sur un écran compris entre 576px et 768px :

Affichage sur petit écran <576px :

Compatibilité

navigateur-chrome 38.0+ navigateur-firefox 38.0+ navigateur-ie 13.0+ navigateur-safari 9.1+ navigateur-opera 25.0+

La balise <picture> est pris en charge par tous les navigateurs à partir d’une certaine version.

Attributs spécifiques

Attributs spécifiques à cet élément.

La balise <picture> prend en charge les attributs globaux

Attributs de type événement

La balise <details> prend en charge les événements souris

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.