Il tag immagine in HTML
Il tag immagine consente ai programmatori una maggiore flessibilità nell'elaborazione delle immagini.
L'uso più comune del tag immagine è nella progettazione di siti Web reattivi. Invece di utilizzare solo un'immagine per ingrandire e rimpicciolire in base alle dimensioni dello schermo di visualizzazione, verranno selezionate più immagini con dimensioni diverse da visualizzare in base alle dimensioni dello schermo, rendendolo così bello.
Il tag immagine contiene due diversi tipi di tag: un tag img e uno o più tag di origine.
Il tag di origine ha i seguenti attributi:
- srcset(request) – definisce l'URL dell'immagine da visualizzare.
- media – accetta qualsiasi media query valida normalmente definita in CSS.
- dimensioni – determina la dimensione dell'immagine visualizzata.
- Tipo: definisce il tipo di file.
Il browser utilizzerà i valori degli attributi per caricare l'immagine più appropriata. Verrà utilizzato il primo tag di origine che corrisponde all'attributo.
Il tag img sarà l'ultimo tag figlio nel tag immagine. Quando non ci sono tag di origine corrispondenti, il tag img verrà utilizzato per la visualizzazione.
Usando
Esempio : in questo esempio, userò il tag immagine in combinazione con i tag source e img per creare una pagina reattiva che viene visualizzata su più dimensioni dello schermo.
Si preparano 3 immagini black.jpg, yellow.jpg e blue.jpg che si trovano allo stesso livello del file html con il seguente contenuto:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Học html miễn phí tại web888.vn</h1> <picture> <source media="(min-width: 800px)" srcset="black.jpg"> <source media="(min-width: 600px)" srcset="blue.jpg"> <img src="yellow.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html>Ridimensiona la finestra del browser, vedrai l'immagine cambiare di dimensione.
