Kipengele cha object-fit

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

Kiufundi

csskichaguzi {
  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:

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

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

Результат:

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

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

cssimg {
  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:

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

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

Результат:

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

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

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

Результат: