Ī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

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

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

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

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

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

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

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

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

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

Результат: