Immagini responsive: max-width: 100%, object-fit, srcset e sizes

Le immagini sono tra le cause più comuni di overflow nei layout mobili. Se hai un’immagine nativamente larga 800px, e la inserisci in uno schermo largo 320px, l’immagine “straborderà”, creando una fastidiosa barra di scorrimento orizzontale.

1. La regola d’oro: max-width: 100%

Per rendere qualsiasi immagine nativamente “elastica”, devi aggiungere una semplice regola di reset al tuo CSS base (quello che scrivi a inizio foglio di stile).

img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block; /* Rimuove lo spazio fantasma causato dall'allineamento inline */
}

Cosa fa questa regola? Dice all’immagine: “Tu sei libera di mantenere la tua grandezza originale in pixel (es. 800px), MA il tuo limite massimo di larghezza è il 100% della scatola in cui ti trovi”. Se la scatola si stringe a 300px, l’immagine si “strizzerà” a 300px. height: auto; assicura che, restringendosi, mantenga le giuste proporzioni senza schiacciarsi.

2. Il problema delle proporzioni

A volte devi inserire una foto verticale (ritratto) all’interno di una “Card” rettangolare orizzontale. Se forzi le misure dell’immagine per farla stare nella card:

.card img {
  width: 100%;
  height: 250px;
}

L’immagine si deformerà, alterando le proporzioni del soggetto.

3. object-fit: cover

Per risolvere questo problema, CSS ha introdotto la proprietà object-fit. Permette all’immagine di comportarsi come un background-image e tagliarsi autonomamente per riempire lo spazio.

.card img {
  width: 100%;
  height: 250px;       /* Forziamo una dimensione rigida... */
  object-fit: cover;   /* Chiediamo al browser di tagliare l'eccedenza */
}

I valori di object-fit:

• cover (molto usato nelle card): L’immagine riempie l’intera scatola. Le parti in eccesso (sopra/sotto o destra/sinistra) vengono tagliate. Le proporzioni rimangono corrette.
• contain: L’immagine fa di tutto per stare tutta dentro la scatola, creando delle bande vuote (tipo le bande nere dei film).
• fill (Il default): L’immagine si stira e distrugge le proporzioni pur di riempire la scatola.

object-position

Se usi cover e il browser ti taglia via la testa della persona ritratta? Usa object-position per dire al browser quale parte dell’immagine mantenere visibile.

.card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top center; /* Mantiene visibile la parte alta */
}

4. srcset e sizes

max-width: 100% impedisce all’immagine di rompere il layout, ma non impedisce al browser di scaricare un file troppo grande.

Con srcset fornisci più versioni della stessa immagine:

<img
  src="progetto-800.webp"
  srcset="
    progetto-400.webp 400w,
    progetto-800.webp 800w,
    progetto-1200.webp 1200w
  "
  sizes="(width >= 900px) 33vw, (width >= 600px) 50vw, 100vw"
  alt="Anteprima del progetto portfolio"
  width="800"
  height="500"
>

srcset dice quali file sono disponibili e quanto sono larghi.
sizes dice quanto spazio occuperà l’immagine nel layout.

In questo esempio:

• sopra 900px, l’immagine occupa circa un terzo della viewport;
• sopra 600px, circa metà viewport;
• sotto, tutta la larghezza disponibile.

Il browser sceglie il file più adatto in base a viewport, densità dello schermo e regole dichiarate.

Esercizio

Prendi una card progetto e prepara tre immagini: 400w, 800w, 1200w. Aggiungi srcset, sizes, width, height e alt. Poi usa i DevTools, scheda Network, per verificare quale file viene scaricato su mobile e desktop.