 |
Specialissimo |
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.
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.
