CSS aspect-ratio e object-fit, con selettore del punto focale
Guida a CSS aspect-ratio e object-fit
CSS aspect-ratio e object-fit: demo dal vivo e Tailwind | We.Inc
Blocca i box su una proporzione con aspect-ratio, poi adatta le foto al loro interno con object-fit cover, contain, fill, none o scale-down. Clicca per impostare un punto focale con object-position.
Due proprietà risolvono la maggior parte dei problemi di dimensionamento delle immagini. aspect-ratio: 16 / 9 fa mantenere a un box quella forma a qualsiasi larghezza, sostituendo il vecchio padding-top hack. object-fit decide come un img o un video riempie quel box: cover ritaglia, contain aggiunge bande vuote, fill deforma. object-position sceglie quale parte resta visibile quando cover ritaglia.
Riferimento rapido
Obiettivo
CSS
Tailwind
Box quadrato
aspect-ratio: 1
Formato video
aspect-ratio: 16 / 9
Qualsiasi proporzione
aspect-ratio: 4 / 3
aspect-4/3 or aspect-[4/3]
Riempire e ritagliare
object-fit: cover
Mostrare tutto
object-fit: contain
Mantenere la parte alta
object-position: top
Qui sotto, un'immagine di prova sta in un box di cui puoi cambiare la forma. Passa tra i cinque valori di object-fit, clicca l'immagine per spostare il punto focale e copia il CSS o le classi Tailwind. Più in basso: il padding hack accanto ad aspect-ratio, embed video responsive e griglie di card con miniature uniformi.
Scegli una proporzione del box e un valore di object-fit. L'anteprima mostra esattamente cosa il browser ritaglierà o deformerà.
Con cover o none selezionati, clicca in qualsiasi punto dell'immagine di prova per impostare object-position su quel punto.
Copia il CSS generato, oppure le classi Tailwind che fanno lo stesso lavoro.
Usa le ricette per griglie di card e video qui sotto quando crei layout reali.
Metti sempre gli attributi width e height sui tag img. I browser li trasformano in una proporzione prima che il file si carichi, così il layout non salta.
Scegli cover per miniature e foto hero, contain per loghi e foto prodotto in cui non si può tagliare nulla.
Se un volto continua a essere tagliato fuori, sposta object-position verso di esso invece di ritagliare di nuovo il file immagine.
aspect-ratio è una forma preferita, non una gabbia. Un testo lungo dentro il box lo rende più alto, a meno che tu non imposti min-height: 0 o overflow.
Domande frequenti
Qual è la differenza tra aspect-ratio e object-fit?
aspect-ratio dà forma al box stesso, per qualsiasi elemento. object-fit si applica solo ai contenuti sostituiti come img, video e canvas, e decide come quel contenuto viene disegnato dentro il suo box. Di solito li usi entrambi: aspect-ratio sull'immagine per fissarne la forma, object-fit: cover perché l'immagine la riempia.
Perché object-fit non fa nulla?
Il box dell'immagine ha la stessa proporzione dell'immagine, quindi non c'è nulla da ritagliare o deformare. object-fit mostra una differenza solo quando il box ha una forma diversa, per esempio un'altezza fissa più width: 100%, o un aspect-ratio diverso da quello del file.
Mi serve ancora il padding-top hack?
Non per i browser attuali. aspect-ratio funziona in Chrome, Edge, Firefox e Safari dal 2021. Tieni l'hack solo se devi supportare browser più vecchi, e controlla caniuse per il tuo pubblico.
object-fit funziona sulle immagini di sfondo?
No. Per gli sfondi CSS gli equivalenti sono background-size: cover o contain, e background-position per il punto focale. object-fit serve per veri elementi img e video, che sono migliori per le immagini di contenuto perché hanno il testo alt e supportano srcset.
Si può usare aspect-ratio su un div?
Sì. Qualsiasi elemento può usarlo. Un div con width: 100% e aspect-ratio: 1 diventa un quadrato che cresce con la sua colonna, utile per segnaposto di mappe, avatar e skeleton loader.
Come il browser risolve aspect-ratio
La proporzione entra in gioco solo quando una dimensione è automatica. Imposta una larghezza e lascia l'altezza su auto, e il browser calcola l'altezza dalla proporzione. Imposta sia larghezza sia altezza e la proporzione viene ignorata, perché non resta nulla da calcolare.
Il valore auto 3 / 2 significa: usa la proporzione naturale dell'elemento quando ne ha una, come un'immagine caricata, e ripiega su 3 / 2 prima che si carichi o quando non ne ha. È esattamente come si comportano dietro le quinte gli attributi width e height su img.
Scegliere un punto focale
object-position accetta gli stessi valori di background-position: parole chiave come top o right, percentuali o lunghezze. 50% 50% è il valore predefinito e mantiene il centro. Una percentuale allinea quel punto dell'immagine con lo stesso punto del box, quindi 30% 40% mantiene l'area a un terzo da sinistra e poco sopra la metà.
Per un sistema di contenuti, salva il punto focale di ogni immagine come due percentuali e scrivilo in uno stile inline. Ogni ritaglio del sito mantiene così il soggetto nell'inquadratura, qualunque sia la proporzione usata dal layout.
aspect-ratio accanto al padding hack
Prima di aspect-ratio, un box prendeva la sua forma da padding-top in percentuale, perché le percentuali del padding verticale si misurano rispetto alla larghezza. Funziona, ma il contenuto deve essere posizionato in modo assoluto all'interno. Entrambi i box qui sotto sono 16:9.
Vecchio e nuovo, stesso risultato
56.25% è 9 diviso 16. La versione moderna richiede una riga e lascia scorrere il contenuto normalmente.
Tutti e cinque i valori di object-fit sulla stessa foto
L'immagine è 3:2 e ogni box è quadrato, quindi ogni valore deve gestire una differenza di proporzioni e le differenze si vedono chiaramente.
Valori di object-fit
Valore
Cosa succede
Tailwind
Deforma l'immagine fino al box. Il valore predefinito per img e video. Distorce quando le proporzioni sono diverse.
Ridimensiona l'intera immagine per farla stare nel box. Lascia bande vuote (letterboxing) quando le proporzioni sono diverse.
Ridimensiona l'immagine per riempire il box e ritaglia l'eccesso. Nessuna distorsione, nessuna banda, una parte dell'immagine viene tagliata.
Mantiene l'immagine alla sua dimensione naturale e ritaglia ciò che non ci sta. Utile per mostrare un dettaglio a 1:1.
Si comporta come none o contain, a seconda di quale dia il risultato più piccolo. Non ingrandisce mai un'immagine piccola.
fill, contain, cover, none, scale-down
La stessa immagine 300 per 200 in cinque quadrati da 110 pixel. Osserva il punto rosso: è il soggetto che cover non deve perdere.
Video ed embed responsive
Un iframe in stile YouTube che mantiene il 16:9
Dai all'iframe width 100% e un aspect-ratio. Non servono div contenitori né posizionamento assoluto.
Griglie di card con miniature uniformi
Ogni miniatura con la stessa forma
I caricamenti arrivano in tutte le forme. aspect-ratio più object-fit: cover rende ordinata la griglia senza modificare un solo file.
Classi Tailwind per proporzione e adattamento
Utility di Tailwind v4 (controlla la documentazione v3 se usi una versione precedente)
CSS
Tailwind
aspect-ratio: 1 / 1
aspect-ratio: 16 / 9
aspect-ratio: auto
aspect-ratio: 3 / 2
aspect-3/2 (v4) or aspect-[3/2]
object-fit: cover / contain / fill
object-cover / object-contain / object-fill
object-fit: none / scale-down
object-none / object-scale-down
object-position: center / top / bottom
object-center / object-top / object-bottom
object-position: 30% 40%
object-[30%_40%]
Deforma l'immagine fino al box. Il valore predefinito per img e video. Distorce quando le proporzioni sono diverse.
Ridimensiona l'intera immagine per farla stare nel box. Lascia bande vuote (letterboxing) quando le proporzioni sono diverse.
Ridimensiona l'immagine per riempire il box e ritaglia l'eccesso. Nessuna distorsione, nessuna banda, una parte dell'immagine viene tagliata.
Mantiene l'immagine alla sua dimensione naturale e ritaglia ciò che non ci sta. Utile per mostrare un dettaglio a 1:1.
Si comporta come none o contain, a seconda di quale dia il risultato più piccolo. Non ingrandisce mai un'immagine piccola.
Area di prova per proporzione, adattamento e punto focale
Immagine sorgente (3:2). Cliccala, oppure portaci il focus e usa i tasti freccia, per impostare il punto focale.
Imposta il punto focale, ora {pos}
Paesaggio di prova con un punto rosso come soggetto
Ripristina al centro
Risultato in un box {ratio} con object-fit: {fit}
Proporzione del box
Il punto focale conta soprattutto con cover e none. Con contain o scale-down decide dove vanno le bande vuote.
Copia CSS
Copia classi
Ti serve la dimensione esatta in pixel per una proporzione? Usa il