Connessione non riuscita. Per favore riprova.

Vai al contenuto
SEO Tools
Aiuto e documentazione
UX / UI Impatto medio Facile 10–20 min

Immagini responsive

Le immagini devono adattarsi al mobile senza scorrimento orizzontale.

Cos'è

Un'immagine con larghezza fissa grande (ad es. width="1200") può traboccare fuori dallo schermo su un mobile stretto e causare lo scorrimento orizzontale dell'intera pagina.

Perché è importante

Lo scorrimento orizzontale è uno dei problemi di UX più fastidiosi su mobile — rompe il layout e dà un'impressione di incompletezza. Si previene facilmente con un'unica regola CSS.

Come fare

  1. 1Dai alle immagini max-width: 100% e height: auto.
  2. 2Indica width e height nell'HTML per la stabilità del layout (CLS), ma limitale nel CSS.
  3. 3Per dimensioni diverse valuta srcset / <picture>.
  4. 4Testa su una larghezza stretta (~360px) per verificare che nulla scorra orizzontalmente.

Esempio

Corretto
img { max-width: 100%; height: auto; }

Conclusione

Un'unica regola (max-width:100%; height:auto) risolve la maggior parte dei traboccamenti delle immagini su mobile. Aggiungi le dimensioni nell'HTML per il CLS e per gli elementi visivi grandi valuta srcset. Una correzione rapida di un comune disturbo mobile.

Argomenti correlati