Proprietà object-fit CSS

Definizione e uso

La proprietà objectFit viene utilizzata per definire come regolare la dimensione di <img> o <video> per adattarsi al contenitore.

Questa proprietà informa come il contenuto deve riempire il contenitore. Ad esempio, "mantenere le proporzioni" o "espandersi e occupare il maggior spazio possibile".

Vedi anche:

Tutorial CSS:CSS object-fit

Manuale CSS:CSS object-position

Manuale HTML DOM:Proprietà objectFit

Esempio

Ritagliare i lati dell'immagine, mantenere le proporzioni e riempire lo spazio:

img.a {
  larghezza: 200px;
  altezza: 400px;
  object-fit: cover;
}

Prova personalmente

Sintassi CSS

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Valore dell'attributo

Valore Descrizione
fill Valore predefinito. Ridimensiona il contenuto sostituito per riempire la casella di contenuto dell'elemento. Se necessario, l'oggetto sarà stirato o compresso.
contain Ridimensiona il contenuto sostituito per mantenere le proporzioni altezza/larghezza, adattandosi alla casella di contenuto dell'elemento.
cover Ridimensiona il contenuto sostituito per mantenere le proporzioni del contenuto della casella di riempimento, mantenendo la dimensione totale della casella di riempimento. L'oggetto sarà ritagliato.
none Il contenuto sostituito non viene ridimensionato.
scale-down La dimensione del contenuto è la stessa di none o contain, a seconda di chi ottiene la dimensione dell'oggetto più piccola tra i due.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: Vedi proprietà separate.
Ereditarietà: No
Produzione animazione: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.objectFit="cover"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0