Articolo originale: CSS Responsive Image Tutorial: How to Make Images Responsive with CSS
La maggioranza dei siti web odierni è responsiva e se hai bisogno di centrare e allineare un'immagine su questi siti, devi imparare come rendere le immagini adattabili o responsive con il CSS.
In questo articolo, ti spiegherò nel dettaglio come ottenere immagini responsive. Imparerai anche alcuni problemi che si verificano generalmente quando provi a rendere delle immagini responsive – e proverò a spiegarti come risolverli.
Come rendere le immagini responsive con il CSS
Dovrei usare unità relative o assolute?
Rendere un'immagine adattabile, o responsiva, in realtà è piuttosto semplice. Quando carichi un'immagine su un sito web, questa possiede una larghezza e un'altezza predefinite. Puoi cambiarle entrambe con il CSS.
Per far sì che un'immagine sia responsiva, devi dare un nuovo valore alla sua proprietà width. L'altezza dell'immagine si regolerà di conseguenza automaticamente.
La cosa importante da sapere è che dovresti sempre usare unità relative per la proprietà width, come la percentuale, piuttosto che unità assolute come il pixel.
img {
width: 500px;
}
Ad esempio, se definisci una larghezza fissa di 500px, la tua immagine non sarà responsiva – perché l'unità è assoluta.
img {
width: 50%;
}
Ecco perché invece dovresti assegnare un'unità relativa, come in 50%. Questo approccio renderà le tue immagini adattabili e saranno in grado di ridimensionarsi a prescindere dalla dimensione dello schermo.
Dovrei usare delle Media Query?
Una delle domande che mi fanno più spesso è se si dovrebbero usare delle media query oppure no.
Una media query è un'altra importante funzionalità del CSS, che aiuta a rendere responsivo un sito web. Non mi ci soffermerò oltre, ma puoi leggere questo mio articolo per imparare a usare le media query più in dettaglio.
La risposta a questa domanda è: "dipende". Se vuoi che la tua immagine abbia dimensioni diverse passando da un dispositivo all'altro, allora dovrai usare delle media query, altrimenti no.
Per questo esempio, l'immagine ha una larghezza del 50% per ogni tipo di schermo. Ma quando vuoi far sì che sia a schermo intero su dispositivi mobili, ti serve l'aiuto delle media query:
@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}
Quindi, in base a questa regola media, su ogni dispositivo più piccolo di 480px, l'immagine occuperà l'intero schermo.
Perché la proprietà max-width non è ideale?
Un altro modo in cui gli sviluppatori possono ottenere immagini responsive è l'uso della proprietà max-width. Tuttavia, questo non è sempre il miglior metodo da usare, perché potrebbe non funzionare su ogni tipo di schermo o dispositivo.
La prima cosa da capire prima di continuare con un esempio è ciò che fa esattamente la proprietà max-width.
La proprietà max-width imposta una larghezza massima per un elemento e non permette alla larghezza di tale elemento di superare il valore indicato (ma può essere più piccolo).
Ad esempio, se l'immagine ha una larghezze predefinita di 500px e la dimensione dello schermo è solo 360px, allora non sarai in grado di vedere l'immagine completa perché non c'è abbastanza spazio.
img {
max-width: 100%;
width: 500px; // assumiamo che sia la dimensione predefinita
}
Perciò puoi definire una proprietà max-width per l'immagine e impostarla al 100%, in modo che rimpicciolisca l'immagine di 500px nello spazio di 360px. In questo modo, potrai vedere l'immagine completa su schermi di dimensione minore.
La cosa positiva è che, dato che stai usando unità relative, l'immagine si adatterà a tutti gli schermi più piccoli di 500px.
Sfortunatamente, la dimensione dello schermo a volte sarà maggiore di 500px, ma l'immagine no perché ha una larghezza predefinita di 500px. Questo approccio interromperà la responsività dell'immagine.
Per sistemare questo problema, dovrai usare ancora la proprietà width, rendendo inutile la proprietà max-width.
E l'altezza?
Un altro problema comune in cui puoi imbatterti ha a che fare con la proprietà height, l'altezza. Normalmente, l'altezza di un'immagine si adatta automaticamente, quindi non hai bisogno di assegnare un'altezza alle immagini (perché in qualche modo impedisce all'immagine di essere presentata nel modo corretto).
Ma in alcuni casi, potresti aver a che fare con immagini che devono avere un'altezza fissa. Quindi, quando assegni un'altezza fissa a un'immagine, sarà ancora responsiva ma non avrà un bell'aspetto.
img {
width: 100%;
height: 300px;
}
Fortunatamente, il CSS ci offre un'altra proprietà per rimediare a questo problema...
Soluzione: la proprietà object-fit
Per avere più controllo sulle immagini, il CSS ha a disposizione un'altra proprietà chiamata object-fit. Usiamola e assegniamole un valore in modo che abbia un aspetto migliore:
img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: bottom;
}
Se necessario, puoi anche usare la proprietà object-position (in aggiunta a object-fit) per concentrarti su uno specifico particolare dell'immagine. Molte persone non conoscono la proprietà object-fit, ma può essere davvero utile per risolvere questi problemi.
Spero che tutto ciò ti abbia aiutato a comprendere e risolvere i tuoi problemi le immagini responsive.
Grazie per aver letto questo articolo!