Elemento immagine html

Nello sviluppo web, è possibile applicare diverse tecniche per rendere la pagina web complessiva reattiva. Più specificamente, vengono aggiunte immagini per migliorare l'aspetto del sito Web. Tuttavia, l'aggiunta di immagini grandi o piccole può anche provocare alcuni problemi di visibilità su diversi dispositivi o talvolta il formato dell'immagine non è supportato. Per superare questi problemi, è possibile utilizzare il tag HTML.

Questo articolo ti guiderà sull'uso dell'elemento HTML.

Qual è l'elemento html?

Per gli sviluppatori Web, l'HTML ""L'elemento fornisce flessibilità nella specifica delle risorse dell'immagine. Consente di inserire uno o più elementi e un elemento nell'ultimo. Il browser carica ogni immagine dall'immagine più appropriata e se non trova corrispondenza, l'immagine specificata nel tag verrà visualizzata.

Come usare l'elemento HTML?

Per utilizzare il tag HTML, seguire la sintassi data:

La descrizione della sintassi sopra è elencata di seguito:

• ""È il tag iniziale e""È il tag finale.
• ""L'elemento contiene le versioni di un'immagine. Queste versioni sono secondo i dispositivi di visualizzazione. Inoltre, ci possono essere più tag negli elementi dell'immagine.
• ""Il tag viene utilizzato per fornire la fonte"src"Della immagine, dimensioni e altri attributi.

Dai un'occhiata all'esempio dato.

Esempio: come utilizzare le immagini con dimensioni diverse in HTML?

Questo esempio dimostrerà come il browser carica ogni immagine dall'elemento di origine e visualizza quello che è più appropriato in base alla dimensione dello schermo. Per fare ciò, usa tre immagini con dimensioni diverse.

Ecco l'elenco delle immagini con dimensioni diverse inserite nella cartella del progetto:

Ora, vediamo come verranno visualizzate queste immagini con dimensioni dello schermo diverse.

In HTML, prima aggiungi

tag per l'intestazione. Quindi, nel ""Elemento tag, aggiungi più tag con il percorso delle immagini:

Tag immagine html

Di seguito è menzionata la descrizione del tag menzionato nella sezione Codice sopra fornita:

• ""È il tag iniziale dell'elemento immagine.
• ""Il tag viene utilizzato per fornire più immagini di origine.
• "media"L'attributo definisce il tipo di dispositivo multimediale a cui è collegato l'elemento HTML.
• "srcset"L'attributo viene utilizzato per fornire gli URL di diverse immagini che devono essere visualizzate.
• ""Il tag, alla fine, viene utilizzato come bambino, che fornisce l'immagine alternativa. Ciò significa che se una qualsiasi delle immagini del tag sorgente non è stata possibile caricare, l'immagine specificata viene utilizzata come alternativa.
• "src"L'attributo indica il percorso dell'immagine alternativa.
• "Al"L'attributo viene utilizzato per aggiungere testo alternativo per la visualizzazione nel caso in cui l'immagine non sia caricata.
• "larghezza"L'attributo viene utilizzato per specificare la larghezza dell'immagine nei pixel.
• ""È il tag di chiusura.

Nota: L'attributo multimediale specifica i tipi di dispositivi multimediali per i quali l'elemento è collegato.

L'output indicato di seguito mostra chiaramente che le immagini sono reattive in base alle dimensioni dello schermo del nostro dispositivo. All'inizio, il "IMG1"Con la dimensione 3047 x 1246 viene visualizzata e quando lo schermo viene trascinato sopra 500px, allora"img3" È visualizzato. Infine, quando la dimensione supera 1000px, "IMG2" appare:

Ecco come puoi utilizzare il tag per rendere le immagini reattive in base alle nostre dimensioni dello schermo.

Conclusione

Le immagini svolgono un ruolo vitale nel rendere attraente il sito Web. Inoltre, per rendere il sito Web più reattivo, l'elemento HTML può essere utilizzato. Questo tag comprende il tag e il tag utilizzati per fornire più risorse multimediali per elementi multimediali come e tag. Questo articolo ha dimostrato l'uso dell'elemento HTML e come le immagini possono essere rese reattive in base alla dimensione dello schermo.