Kipengele cha object-fit

Kipengele object-fit hutoa uwiano wa pande au urekebishaji wa vipimo vya vipengele kama vile picha au video.

Kiufundi

kichaguzi {
	object-fit: fill au contain au cover au none;
}

Jedwali linaonyesha thamani kuu za kipengele object-fit:

Thamani	Maelezo
`fill`	Urekebishaji wa kipengele ili kilingane na vipimo vilivyobainishwa, hali hii hupuuzia uwiano wa kipengele.
`contain`	Urekebishaji wa kipengele ili kilingane na vipimo vilivyobainishwa, hali hii huhifadhi uwiano wa kipengele.
`cover`	Vipimo vya kipengele hubadilishwa, ili kujaza kabisa eneo maalum, hali hii huhifadhi uwiano wa kipengele yenyewe.
`none`	Vipimo asili vya kipengele vinahifadhiwa.

Wacha tuweke picha yetu ijaze kipimo kilichobainishwa bila kuhifadhi uwiano:

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

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

Sasa wacha tufanye picha ijaze chombo kilichobainishwa huku ikiwahifadhi uwiano wake:

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

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

Wacha picha yetu ijaze chombo kilichobainishwa kwa kiasi kwamba ukubwa wa picha yenyewe ubadilike, lakini hali hii ihifadhi uwiano wake:

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

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

Wacha tuweke picha yetu katika chombo kilichobainishwa huku ikiwahifadhi vipimo vyake asili:

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

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