# aspect-ratio: how to remove CLS from images, with no wrapper

aspect-ratio reserves the image space before the file arrives and removes the layout shift. Where it belongs in the markup, and where it makes things worse.

> Page: https://ui.eneawork.it/blog/css-aspect-ratio-immagini
> Markdown: https://ui.eneawork.it/blog/css-aspect-ratio-immagini.md

*2026-11-01*

Risposta breve: dichiarare aspect-ratio su un'immagine riserva lo spazio prima che il file arrivi e toglie il layout shift. Un tag img senza dimensioni è la causa più frequente di CLS su una pagina di contenuto.

Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, valori letti da /api/stats il 1 novembre 2026. La procedura dell'articolo è stata verificata con il pannello Performance di Chrome, traccia Layout Shift, su tre larghezze: ogni passaggio si ripete sulla tua pagina. Niente di quanto segue richiede un account.

## Perché il CLS si muove

Il browser non conosce l'altezza di un'immagine finché non ha i byte. Fino a quel momento la riserva a zero, poi la allarga e spinge in basso tutto quello che segue. Il punteggio CLS misura proprio questo spostamento, in proporzione a quanto e a quanta pagina si muove.

## Il codice

.thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; } /* la riserva vale anche prima che il file arrivi */ .thumb-slot { aspect-ratio: 16 / 9; background: color-mix(in oklab, currentColor 8%, transparent); }

Il vecchio trucco del wrapper con padding-top: 56.25% risolve lo stesso problema. Serve ancora quando devi supportare browser senza aspect-ratio: il comando qui sotto calcola la percentuale da una misura di progetto.

# percentuale del wrapper classico per un'immagine 1200x675 node -e "const w=1200,h=675;console.log((100*h/w).toFixed(2)+'%'+' / ratio '+(w/h).toFixed(4))" # atteso: 56.25% / ratio 1.7778

## Le tre larghezze che contano

Il supporto copre Chrome 88, Firefox 89 e Safari 15. Non è una funzionalità da polyfillare: sul browser che non la conosce il layout resta quello di prima, senza rotture.

## Il limite

aspect-ratio fissa il rapporto, non l'altezza: se il contenuto cresce dentro un contenitore con rapporto fisso, esce o viene tagliato. Applicalo all'immagine, o a un contenitore che contiene solo media, mai al blocco che contiene testo.

## Come verificarlo

## Dove continuare

Nel catalogo: blocco gallery, componenti e icone. Le guide: layout shift da immagini e CLS, cause e correzioni; il confronto: Tailwind contro CSS Modules.

## FAQ

### Basta width e height sull'attributo?

Sì per il layout, perché il browser ne ricava il rapporto. aspect-ratio in CSS serve quando le dimensioni cambiano con la viewport o quando l'immagine la generi tu.

### Funziona anche con video e iframe?

Sì, aspect-ratio è una proprietà generale. Su un iframe evita il salto quando il player si monta, che è il caso più visibile su una pagina prodotto.

### Devo tenere il wrapper con padding-top?

Solo se il pubblico include browser senza supporto. Altrimenti aggiunge un nodo e una regola da mantenere.

### Come gestisco immagini di rapporti diversi?

Con object-fit: cover e un rapporto unico per la griglia, oppure con rapporti dichiarati per variante. Il rapporto misto nella stessa riga rompe l'allineamento.

### Il CLS scende davvero a zero?

Non sempre: restano font, banner e contenuti iniettati. Togliere lo shift delle immagini elimina però la voce più grande su una pagina di contenuto.