Својството 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;
}

Погледнете исто така

својството aspect-ratio,
кое го одредува соодносот на страните на елементот