Savybė object-fit

Savybė object-fit nurodo elementų, tokių kaip vaizdas ar video, kraštinių santykį ar mastelio keitimą.

Sintaksė

selektorius {
	object-fit: fill arba contain arba cover arba none;
}

Lentelėje pateiktos pagrindinės savybės object-fit reikšmės:

Reikšmė	Aprašas
`fill`	Elemento mastelio keitimas, kad jis atitiktų nurodytus matmenis, tačiau elemento proporcijos ignoruojamos.
`contain`	Elemento mastelio keitimas, kad jis atitiktų nurodytus matmenis, tačiau elemento proporcijos išsaugomos.
`cover`	Elemento matmenys keičiami, kad visiškai užpildytų nurodytą sritį, tačiau paties elemento proporcijos išsaugomos.
`none`	Išsaugomi pradiniai elemento matmenys.

Nustatykime, kad mūsų vaizdas užpildytų nurodytą dydį neišsaugant proporcijų:

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

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

Dabar padarykime, kad vaizdas užpildytų nurodytą konteinerį išsaugant proporcijas:

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

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

Užpildykime mūsų vaizdu nurodytą konteinerį taip, kad paties vaizdo dydis pasikeistų, tačiau jo proporcijos būtų išsaugotos:

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

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

Tiesiog įdėkime mūsų vaizdą į nurodytą konteinerį išsaugant jo pradinius matmenis:

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

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