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!

Nel passato, creare un sito web era molto più semplice. Oggi il layout di un website deve adattarsi non solo ai computer, ma anche a tablet, dispositivi mobile, e pure TV.

Fare un sito web con un layout adattabile è chiamato Web Design Responsivo. E le Media Query in CSS sono una delle parti più importanti del Design Responsivo. In questo articolo vedremo nel dettaglio le Media Query e come usarle in CSS.

Se preferisci puoi vedere la versione video qui sotto:

Cosa è una Media Query?

Una Media Query è una funzionalità di CSS3 che fa adattare il layout di una pagina a diverse dimensioni di schermo e diversi tipi di media.

Sintassi

@media media type and (condition: breakpoint) {
  // CSS rules
}

Possiamo creare regole per diversi tipi di media con una varietà di condizioni. Se la condizione o il tipo di media sono quelli, allora le regole dentro la media query saranno applicate, altrimenti non lo saranno.

La sintassi potrebbe essere complicata all'inizio, quindi spieghiamo ogni parte una alla volta in dettaglio...

Regola @media

Iniziamo definendo le media query con la regola @media è poi includiamo le regole CSS all'interno delle parentesi graffe. La regola @media è anche usata per specificare il tipo di media.

@media () {
  // CSS rules
}

Parentesi

Dentro le parentesi, impostiamo la condizione. Per esempio, voglio applicare un font più grande per dispositivi mobili. Per farlo, dobbiamo impostare una massima larghezza che verifica la larghezza del dispositivo:

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

In genere, la dimensione del testo sarà 14px, ma visto che abbiamo applicato una media query, cambierà a 16px quando un dispositivo ha una larghezza massima di 480px o meno.

Importante: metti le tue media query sempre alla fine del tup file CSS.

Tipi di media

Se non applichiamo un tipo di media, la regola @media influenza tutti i tipi di dispositivi come default. Altrimenti, i tipi di media vengono dopo la regola @media. Ci sono molti tipi di dispositivi, ma possiamo raggrupparli in quattro categorie:

• all — per tutti i tipi di media
• print — per le stampanti
• screen — per gli schermi di computer, tablet e smartphone
• speech — per lettori di schermo che "leggono" la pagina ad alta voce

Per esempio, quando voglio selezionare solo gli schermi, metto la parola chiave screen dopo la regola @media. Devo anche concatenare le regole con la parola chiave "and":

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Breakpoint

Breakpoint è forse il termine che sentirai usare e userai più comunemente. Un breakpoint è chiave per determinare quando cambiare layout e usare le nuove regole dentro le media query. Torniamo indietro al nostro esempio all'inizio:

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Qui il breakpoint è 480px. Ora la media query sa quando settare o sovrascrivere la nuova classe. In pratica, se la larghezza di un dispositivo è più piccola di 480px, la classe text sarà applicta, altrimenti non lo sarà.

Breakpoint comuni: c'è una risoluzione standard?

Una delle domande più comuni è "Quale breakpoint dovrei usare?". Ci sono un sacco di dispositi sul mercato quindi non possiamo e non dovrebbo definire breakpoint fissi per ognuno di loro.

Per questo non possiamo dire che ci sono delle risoluzioni standard per i dispositivi, ma ci sono dei breakpoint comunemente usati. Se stai usando un framework CSS (tipo Bootstrap, Bulma, ecc) puoi anche usare i loro breakpoint.

Ora vediamo alcuni breakpoint comuni per le larghezze dei dispositivi:

• 320px — 480px: dispositivi mobili
• 481px — 768px: iPad, Tablet
• 769px — 1024px: schermi piccoli, laptop
• 1025px — 1200px: computer desktop, schermi grandi
• 1201px and more —  schermi extra large, TV

Come ho detto sopra questi breakpoint possono essere diversi e non c'è uno standard esattamente definito, ma questi sono alcuni comunemente usati.

Tirando le somme

Il design responsivo oggigiorno non può mancare nel campo del design e sviluppo web. Le media query sono una delle più importanti parti del costruire layout responsivi e spero che troverai il mio post utile per capire come funzionano le media query.

Se vuoi imparare di più sullo sviluppo web, iscriviti al mio canale.

Grazie per aver letto!