Уласцівасць object-fit

Уласцівасць object-fit задае суадносіны бакоў або маштабаванне такiх элементаў як выява або відэа.

Сінтаксіс

селектар {
	object-fit: fill або contain або cover або none;
}

У табліцы прадстаўлены асноўныя значэннi для ўласцівасці object-fit:

Значэнне	Апісанне
`fill`	Маштабаванне элемента для адпаведнасці зададзеным памерам, пры гэтым прапорцыi элемента iгнаруюцца.
`contain`	Маштабаванне элемента для адпаведнасці зададзеным памерам, пры гэтым прапорцыi элемента захоўваюцца.
`cover`	Памеры элемента змяняюцца, каб цалкам запоўніць паказаную вобласць, пры гэтым прапорцыi самога элемента захоўваюцца.
`none`	Зыходныя памеры элемента захоўваюцца.

Дадаймо зададзiм нашай выяве запаўненне паказанага памеру без захавання прапорцый:

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

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

А цяпер давайце зробім так, каб выява запаўніла паказаны кантэйнер з захаваннем прапорцый:

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

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

Дадаймо запоўнім нашай выявай паказаны кантэйнер так, каб памер самой выявы змянiўся, але пры гэтым былi захаваны яго прапорцыi:

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

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

Дадаймо проста змясцім нашу выяву ў паказаны кантэйнер з захаваннем яго зыходных памераў:

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

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