Proprietatea object-fit

Proprietatea object-fit definește raportul de aspect sau scalarea unor elemente precum imaginea sau videoclipul.

Sintaxă

selector {
	object-fit: fill sau contain sau cover sau none;
}

În tabel sunt prezentate valorile principale pentru proprietatea object-fit:

Valori

Valoare	Descriere
`fill`	Scalarea elementului pentru a se potrivi cu dimensiunile date, în timp ce proporțiile elementului sunt ignorate.
`contain`	Scalarea elementului pentru a se potrivi cu dimensiunile date, în timp ce proporțiile elementului sunt păstrate.
`cover`	Dimensiunile elementului sunt modificate pentru a umple complet zona indicată, în timp ce proporțiile elementului în sine sunt păstrate.
`none`	Dimensiunile originale ale elementului sunt păstrate.

Exemplu

Să setăm imaginii noastre umplerea dimensiunii indicate fără păstrarea proporțiilor:

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

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

Exemplu

Acum să facem ca imaginea să umple containerul indicat cu păstrarea proporțiilor:

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

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

Exemplu

Să umplem cu imaginea noastră containerul indicat astfel încât dimensiunea imaginii în sine să se modifice, dar în același timp proporțiile sale să fie păstrate:

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

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

Exemplu

Să plasăm imaginea noastră în containerul indicat păstrându-i dimensiunile originale:

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

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

Vedeți și

proprietatea aspect-ratio,
care definește raportul de aspect al elementului