Proprietà object-fit

La proprietà object-fit definisce le proporzioni o il ridimensionamento di elementi come immagini o video.

Sintassi

selettore {
	object-fit: fill o contain o cover o none;
}

La tabella presenta i valori principali per la proprietà object-fit:

Valore	Descrizione
`fill`	Ridimensionamento dell'elemento per adattarsi alle dimensioni specificate, ignorando le proporzioni dell'elemento.
`contain`	Ridimensionamento dell'elemento per adattarsi alle dimensioni specificate, mantenendo le proporzioni dell'elemento.
`cover`	Le dimensioni dell'elemento vengono modificate per riempire completamente l'area specificata, mantenendo le proporzioni dell'elemento stesso.
`none`	Le dimensioni originali dell'elemento vengono mantenute.

Impostiamo il riempimento della nostra immagine alla dimensione specificata senza mantenere le proporzioni:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Ora facciamo in modo che l'immagine riempia il contenitore specificato mantenendo le proporzioni:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Riempiamo il nostro contenitore specificato con l'immagine in modo che la dimensione dell'immagine stessa cambi, ma mantenendo le sue proporzioni:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Inseriamo semplicemente la nostra immagine nel contenitore specificato mantenendo le sue dimensioni originali:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}