Właściwość object-fit

Właściwość object-fit ustawia proporcje lub skalowanie takich elementów jak obraz lub wideo.

Składnia

selektor {
	object-fit: fill lub contain lub cover lub none;
}

W tabeli przedstawiono główne wartości dla właściwości object-fit:

Wartość	Opis
`fill`	Skalowanie elementu dla dopasowania do podanych wymiarów, przy czym proporcje elementu są ignorowane.
`contain`	Skalowanie elementu dla dopasowania do podanych wymiarów, przy czym proporcje elementu są zachowywane.
`cover`	Wymiary elementu są zmieniane, aby całkowicie wypełnić określony obszar, przy czym proporcje samego elementu są zachowywane.
`none`	Oryginalne wymiary elementu są zachowywane.

Ustawmy naszemu obrazowi wypełnienie określonego rozmiaru bez zachowania proporcji:

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

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

A teraz sprawmy, aby obraz wypełnił określony kontener z zachowaniem proporcji:

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

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

Wypełnijmy naszym obrazem określony kontener tak, aby rozmiar samego obrazu się zmienił, ale przy tym zostały zachowane jego proporcje:

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

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

Po prostu umieśćmy nasz obraz w określonym kontenerze z zachowaniem jego oryginalnych rozmiarów:

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

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