L'Informatica Piemunteisa - home page L'Informatica Piemunteisa



Trucchi

titolo: Immagini Responsive

data: 06/09/2015

           Negli ultimi mesi, in seguito alle comunicazioni di Google, c'è stata una vera e propria corsa al rifacimento dei siti in modo da adeguarli alle regole del Responsive: la nuova modalità, in cui si dice anche che il sito è Reattivo, fa si che il contenuto delle pagine si adatta automaticamente ai vari dispositivi che si collegano, permettendo una visione più fluida e funzionale.

In questo ambito le immagini necessitano un trattamento a parte, che non ha nulla a che vedere col resto della pagina web.

Alberi - esempio immagine Responsive


Ci sono varie tecniche, anche complesse come l'uso del nuovo tag picture o dell'attributo srcset, che però spesso non sono ben recepite allo stesso modo dai vari browser.

Un metodo invece molto semplice è il seguente (usato ad esempio per l'immagine soprastante):
basta fare riferimento ad una classe del foglio di stile in cui si esprime max-width:100%, oppure impostare direttamente l'attributo stile della immagine con il medesimo parametro di max-width (ossia di larghezza massima).

In questo modo il gioco è fatto, valevole anche per l'ormai quasi obsoleto I.E.8: l'immagine si adatta automaticamente! Potete sperimentarlo riducendo gradualmente l'ampiezza della finestra del browser.

Indietro


Informativa - Contatti - Favoriti

L'Informatica Piemunteisa © 2002-2018 by Franco C.