Atribuut object-fit

Atribuut object-fit määrab kuvasuhte või skaleerimise elementidele nagu pilt või video.

Süntaks

selektor {
	object-fit: fill või contain või cover või none;
}

Tabelis on toodud peamised väärtused atribuudile object-fit:

Väärtus	Kirjeldus
`fill`	Elemendi skaleerimine etteantud mõõtmetega sobivaks, kusjuures elemendi proportsioone ei arvestata.
`contain`	Elemendi skaleerimine etteantud mõõtmetega sobivaks, kusjuures elemendi proportsioonid säilivad.
`cover`	Elemendi mõõtmed muudetakse, et märgitud ala täielikult täita, kusjuures elemendi enda proportsioonid säilivad.
`none`	Elemendi algmõõtmed säilivad.

Määrame oma pildile märgitud suuruse täitmise proportsioone säilitamata:

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

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

Nüüd teeme nii, et pilt täidaks märgitud konteineri proportsioone säilitades:

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

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

Täidame oma pildiga märgitud konteineri nii, et pildi enda suurus muutuks, kuid selle proportsioonid säiliksid:

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

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

Lihtsalt asetame oma pildi märgitud konteinerisse säilitades selle algmõõtmed:

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

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