Ad oggetto - Trucchi CSS | CSS Almanac 2025

La object-fitproprietà definisce come un elemento risponde all'altezza e alla larghezza della sua casella di contenuto. È inteso per immagini, video e altri formati multimediali incorporabili insieme alla object-positionproprietà. Usato da solo, object-fitci consente di ritagliare un'immagine in linea dandoci un controllo dettagliato su come si schiaccia e si allunga all'interno della sua scatola.

object-fit può essere impostato con uno di questi cinque valori:

fill: questo è il valore predefinito che allunga l'immagine per adattarla alla casella del contenuto, indipendentemente dalle sue proporzioni.
contain: aumenta o diminuisce la dimensione dell'immagine per riempire il riquadro preservandone le proporzioni.
cover: l'immagine riempirà l'altezza e la larghezza della sua casella, ancora una volta mantenendo le sue proporzioni ma spesso ritagliando l'immagine nel processo.
none: l'immagine ignorerà l'altezza e la larghezza del genitore e manterrà la sua dimensione originale.
scale-down: l'immagine confronterà la differenza tra nonee containper trovare la più piccola dimensione dell'oggetto in calcestruzzo.

Ecco come potremmo impostare quella proprietà:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Poiché la seconda immagine ha un rapporto di aspetto diverso dall'immagine originale a sinistra, si estenderà al di fuori del regno della sua casella di contenuto, ritagliando le parti superiore e inferiore dell'immagine.

Vale la pena notare che per impostazione predefinita l'immagine è centrata all'interno della casella del contenuto, ma questo può essere modificato con la object-positionproprietà.

Demo

La demo di seguito mostra cinque esempi che descrivono in dettaglio come potremmo desiderare che un'immagine si schiacci in una casella di contenuto che a volte è più piccola o più grande della sua larghezza originale (ridimensiona il browser per avere un'idea migliore di come potrebbe funzionare):

Vedi il Pen object-fit di Robin Rendle (@robinrendle) su CodePen.

Se il contenuto dell'immagine non riempie la casella del contenuto per qualsiasi motivo, lo spazio vuoto mostrerà lo sfondo dell'elemento, in questo caso uno sfondo grigio chiaro.

Supporto del browser

Vale la pena notare che iOS 8-9.3 e Safari 7-9.1 la object-fitproprietà ma non object-position.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.