Un'immagine reattiva è un'immagine che può adattarsi a diversi dispositivi, indipendentemente dalle dimensioni dello schermo. Avere un’immagine responsive sul sito web è diventato fondamentale al giorno d’oggi. Poiché non solo velocizza il sito Web, ma offre anche un'esperienza utente interessante su tutti i dispositivi. Anche le immagini reattive verranno ridimensionate ridimensionando il browser.
Le immagini reattive si adattano in modo efficiente alle diverse dimensioni dello schermo su diversi dispositivi. Garantisce il mantenimento della qualità. Un sito web reattivo con immagini reattive aumenta sicuramente il coinvolgimento e i tassi di conversione. Le immagini possono essere rese reattive utilizzando i CSS insieme alle query multimediali.
Questo articolo utilizzerà HTML e CSS per rendere le immagini reattive.
Come rendere le immagini reattive con HTML e CSS?
Per rendere le immagini reattive utilizzando HTML e CSS, procedi nel seguente modo:
- Utilizza la proprietà 'larghezza massima'.
- Utilizza la proprietà 'larghezza'.
- Applicare query multimediali.
Metodo 1: utilizzare la proprietà “max-width”.
Il primo metodo per rendere un'immagine responsiva è utilizzare il comando ' larghezza massima ' proprietà. IL ' larghezza massima La proprietà ' viene utilizzata per definire la larghezza massima dell'immagine. Nel caso in cui il contenuto superi la larghezza massima, cambierà l'altezza dell'elemento.
Crea HTML
Per aggiungere un file immagine nel tag
dell'HTML, gli utenti devono utilizzare il tagAggiungi CSS
Ora crea un file CSS esterno salvalo con l’estensione “. css ' e collegarlo all'interno del tag
del file HTML. Per definire lo stile del file immagine nel file CSS, inizia con il tag img e apri le parentesi graffe. Quindi, all'interno della parentesi graffa, aggiungi il ' larghezza massima: 100% ;” per adattare l'immagine orizzontalmente all'interno del contenitore. Inoltre, impedirà il taglio delle immagini. Successivamente, aggiungi ' altezza: automatica ;” per regolare automaticamente l'altezza, in modo che l'immagine venga visualizzata correttamente:imm {
larghezza massima : 100% ;
altezza : auto ;
}
Ridimensiona la finestra del browser per verificare come viene ridimensionata l'immagine.
Metodo 2: utilizzare la proprietà 'larghezza'.
Un altro metodo per rendere un’immagine responsiva è utilizzare la proprietà “ larghezza ”. La proprietà ' larghezza ' definisce la larghezza delle immagini e del testo. Non contiene margini, spaziatura interna o bordi. Può impostare la dimensione delle immagini e del testo nel formato cm, px o%. Per rendere un'immagine responsiva, è sufficiente assegnare il comando ' larghezza 'proprietà a' 100 %”. Collocamento ' larghezza: 100% ;” significa che rende l'immagine grande quanto l'elemento genitore:
imm {larghezza : 100% ;
altezza : auto ; }
Quanto sopra conferma che l'immagine è responsiva. Per verificare se è reattivo o meno, ridimensiona semplicemente la finestra del browser.
Metodo 3: applicare query multimediali
Le query multimediali CSS aiutano gli utenti a modificare l'aspetto di una pagina web. La query multimediale CSS contiene condizioni, ogni volta che queste condizioni vengono soddisfatte, cambierà l'aspetto del dispositivo o del browser. Le media query possono anche aiutare gli utenti a rendere le immagini reattive. Per questo motivo, innanzitutto, specificare '@ media ' e quindi specificare il ' larghezza massima ' e assegna la larghezza massima per un'immagine tra parentesi graffe. Ogni volta che questa condizione verrà soddisfatta, l'immagine diventerà reattiva. Successivamente, aggiungi le parentesi graffe, specifica il tag img e specifica ' larghezza: 100% ;” valore:
@media ( larghezza massima : 480px ) {imm {
larghezza : 100% ;
}
}
Nota : l'immagine sarà reattiva solo se soddisfa la condizione specificata.
La media query CSS è stata applicata e ora l'immagine si comporterebbe come reattiva se venisse ridimensionata alla dimensione dell'immagine specificata. Altrimenti, non sarà reattivo:
Conclusione
Per rendere le immagini reattive con HTML e CSS, gli utenti hanno vari metodi. Questi metodi includono la creazione di immagini reattive utilizzando ' larghezza massima ' proprietà, ' larghezza ', e anche applicando la media query CSS. Questo articolo ha presentato agli utenti la soluzione completa per rendere le immagini reattive.