Az object-fit tulajdonság

Az object-fit tulajdonság meghatározza a képarányt vagy méretezést olyan elemeknél, mint a kép vagy videó.

Szintaxis

cssszelektor {
  object-fit: fill vagy contain vagy cover vagy none;
}

A táblázat az object-fit tulajdonság főbb értékeit mutatja be:

Érték	Leírás
`fill`	Az elem méretezése a megadott méreteknek megfelelően, miközben az elem arányait figyelmen kívül hagyja.
`contain`	Az elem méretezése a megadott méreteknek megfelelően, miközben az elem arányai megmaradnak.
`cover`	Az elem méretei úgy változnak, hogy teljesen kitöltsék a megadott területet, miközben az elem saját arányai megmaradnak.
`none`	Az elem eredeti méretei megmaradnak.

Állítsuk be a képünknek a megadott méret kitöltését az arányok megőrzése nélkül:

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

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

Результат:

Most pedig tegyük úgy, hogy a kép kitöltse a megadott tárolót az arányok megőrzésével:

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

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

Результат:

Töltsük ki a képünkkel a megadott tárolót úgy, hogy magának a képnek a mérete változzon, de közben az arányai megmaradjanak:

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

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

Результат:

Egyszerűen helyezzük el a képünket a megadott tárolóban, megtartva annak eredeti méreteit:

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

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

Результат: