Savybė object-fit

Savybė object-fit nurodo elementų, tokių kaip vaizdas ar video, kraštinių santykį ar mastelio keitimą.

Sintaksė

cssselektorius {
  object-fit: fill arba contain arba cover arba none;
}

Lentelėje pateiktos pagrindinės savybės object-fit reikšmės:

Reikšmė	Aprašas
`fill`	Elemento mastelio keitimas, kad jis atitiktų nurodytus matmenis, tačiau elemento proporcijos ignoruojamos.
`contain`	Elemento mastelio keitimas, kad jis atitiktų nurodytus matmenis, tačiau elemento proporcijos išsaugomos.
`cover`	Elemento matmenys keičiami, kad visiškai užpildytų nurodytą sritį, tačiau paties elemento proporcijos išsaugomos.
`none`	Išsaugomi pradiniai elemento matmenys.

Nustatykime, kad mūsų vaizdas užpildytų nurodytą dydį neišsaugant proporcijų:

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

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

Результат:

Dabar padarykime, kad vaizdas užpildytų nurodytą konteinerį išsaugant proporcijas:

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

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

Результат:

Užpildykime mūsų vaizdu nurodytą konteinerį taip, kad paties vaizdo dydis pasikeistų, tačiau jo proporcijos būtų išsaugotos:

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

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

Результат:

Tiesiog įdėkime mūsų vaizdą į nurodytą konteinerį išsaugant jo pradinius matmenis:

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

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

Результат: