Īpašība object-fit

Īpašība object-fit nosaka malu attiecību vai mērogošanu tādiem elementiem kā attēls vai video.

Sintakse

selektors {
	object-fit: fill vai contain vai cover vai none;
}

Tabulā parādītas galvenās object-fit īpašības vērtības:

Vērtība	Apraksts
`fill`	Elementa mērogošana, lai atbilstu dotajiem izmēriem, bet elementa proporcijas tiek ignorētas.
`contain`	Elementa mērogošana, lai atbilstu dotajiem izmēriem, vienlaikus saglabājot elementa proporcijas.
`cover`	Elementa izmēri tiek mainīti, lai pilnībā aizpildītu norādīto apgabalu, vienlaikus saglabājot paša elementa proporcijas.
`none`	Tiek saglabāti elementa oriģinālie izmēri.

Uzstādīsim mūsu attēlam norādītā izmēra aizpildīšanu, nesaglabājot proporcijas:

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

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

Tagad padarīsim, lai attēls aizpildītu norādīto konteineru, saglabājot proporcijas:

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

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

Aizpildīsim norādīto konteineru ar mūsu attēlu tā, lai paša attēla izmērs mainītos, bet vienlaikus būtu saglabātas tā proporcijas:

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

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

Vienkārši ievietosim mūsu attēlu norādītajā konteinerā, saglabājot tā sākotnējos izmērus:

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

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