Atribuut object-fit

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

Süntaks

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

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

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

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

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

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

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

Результат:

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

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

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

Результат: