English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'elemento <picture> HTML utilizza zero o più elementi <source> e un elemento <img> per fornire versioni di immagine per diversi scenari di visualizzazione/dispositivo. Il browser selezionerà il sottomento <source> più adatto, se non trova corrispondenze, selezionerà l'URL dell'attributo src dell'elemento <img>. Poi, l'immagine selezionata viene visualizzata nello spazio occupato dall'elemento <img>.
Mostra immagini diverse in base alle dimensioni dello schermo, se non è stato trovato un match o il browser non supporta l'attributo picture, viene utilizzato l'elemento img:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Manuale di base(oldtoolbag.com)</title> </head> <body> <h2>elemento 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>Testa per vedere <‹/›>
L'elemento picture permette di visualizzare immagini diverse su dispositivi diversi, generalmente utilizzato per la risposta ai dispositivi.
HTML5 ha introdotto l'elemento <picture>, che rende l'adattamento delle risorse di immagine più flessibile.
L'elemento <picture> può avere zero o più elementi <source> e un <img>, ogni elemento <source> corrisponde a un dispositivo diverso e fa riferimento a diverse immagini di origine, se non c'è una corrispondenza, viene scelta l'URL dell'attributo src dell'elemento <img>.
Attenzione:
L'elemento <img> è messo all'ultimo <picture> Dopo l'elemento, se il browser non supporta l'attributo, viene visualizzata l'immagine dell'elemento <img>. I numeri nella tabella rappresentano la versione del browser che supporta l'elemento.
IEFirefoxOperaChromeSafari
L'attributo <picture> è stato definito come nuovo in HTML5.
Supporto <picture> etichetta Proprietà globali HTML.
Supporto <picture> etichetta Proprietà degli eventi HTML.