Manual de referência HTML

Glossaire des balises HTML

HTML: <picture> élément

L'élément <picture> HTML utilise un ou plusieurs éléments <source> et un élément <img> pour fournir des affichages differents/Fournit des versions d'images pour différentes scènes d'appareils. Le navigateur choisit l'élément <source> le plus approprié, sinon il choisit l'URL de l'attribut src de l'élément <img>. Ensuite, l'image sélectionnée est affichée dans l'espace occupé par l'élément <img>.

Exemple

Affiche différentes images en fonction de la taille de l'écran, utilise l'élément img si aucune correspondance n'est trouvée ou si l'attribut picture n'est pas supporté par le navigateur :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<h2>élément picture</h2>
<picture>
　　<source media="(min-width:　650px)" srcset="/run/html/views.png">
　　<source media="(min-width:　465px)" srcset="/run/html/default.jpg">
　　<img src="/run/html/haha.gif" style="width:auto;">
</picture>
</body>
</html>

Voyons si ‹/›

Définition

L'élément picture permet d'afficher différentes images sur différents appareils, généralement utilisé pour la réactivité.

HTML5 L'élément <picture> a été introduit, ce qui rend l'ajustement des ressources d'image plus flexible.

L'élément <picture> peut contenir zéro ou plusieurs éléments <source> et un élément <img>, chaque élément <source> correspond à un appareil différent et fait référence à une source d'image différente. Si aucun correspondance n'est trouvée, l'URL de l'attribut src de l'élément <img> est sélectionnée.

Attention: 　　　　

　　　　　　　　L'élément <img> est placé en dernier 　<picture> Après l'élément, si le navigateur ne prend pas en charge cette propriété, l'image de l'élément <img> est affichée. 　　　　

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du premier navigateur qui prend en charge cet élément.

IEFirefoxOperaChromeSafari

HTML 4.01 et HTML5 différences entre

L'attribut <picture> est un attribut HTML5 Nouvellement définies.

Propriétés globales

Prise en charge de la balise <picture> Propriétés globales de HTML.

Propriétés événementielles

Prise en charge de la balise <picture> Propriétés événementielles de HTML.

HTML: <q> balise HTML: <pre> balise