Својство object-fit

Својство object-fit задаје однос страница или скалирање елемената као што су слика или видео.

Синтакса

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

У табели су представљене основне вредности за својство object-fit:

Вредност	Опис
`fill`	Скалирање елемента да одговара задатим димензијама, при чему се пропорције елемента занемарују.
`contain`	Скалирање елемента да одговара задатим димензијама, при чему се пропорције елемента чувају.
`cover`	Димензије елемента се мењају како би у потпуности попуниле наведену област, при чему се пропорције самог елемента чувају.
`none`	Оригиналне димензије елемента се чувају.

Поставићемо нашој слици попуњавање наведене димензије без очувања пропорција:

<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;
}

Попунићемо нашем сликом наведени контејнер тако да се димензије саме слике промене, али при томе буду очуване њене пропорције:

<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;
}