object-fit xususiyati

object-fit xususiyati rasm yoki video kabi elementlarning aspekt nisbati yoki masshtabini belgilaydi.

Sintaksis

cssselektor {
  object-fit: fill yoki contain yoki cover yoki none;
}

object-fit xususiyati uchun asosiy qiymatlar jadvalda keltirilgan:

Qiymat	Tavsif
`fill`	Elementning nisbatlarini hisobga olmasdan, berilgan o‘lchamlarga moslashtirish uchun elementni masshtablash.
`contain`	Elementning nisbatlarini saqlab qolgan holda, berilgan o‘lchamlarga moslashtirish uchun elementni masshtablash.
`cover`	Elementning o‘lchamlari ko‘rsatilgan sohani to‘liq to‘ldirish uchun o‘zgartiriladi, shu bilan birga elementning nisbatlari saqlanib qolinadi.
`none`	Elementning asl o‘lchamlari saqlanib qolinadi.

Keling, rasmimizga nisbatlarni saqlamasdan belgilangan o‘lchamni to‘ldirishni belgilaymiz:

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

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

Результат:

Endi esa, rasm nisbatlarini saqlab qolgan holda belgilangan konteynerni to‘ldirishni amalga oshiramiz:

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

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

Результат:

Keling, rasmimizning o‘lchami o‘zgarsin, lekin uning nisbatlari saqlanib qolsin sharti bilan belgilangan konteynerni to‘ldiramiz:

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

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

Результат:

Keling, rasmimizni uning asl o‘lchamlarini saqlab qolgan holda belgilangan konteyerni ichiga joylashtiramiz:

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

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

Результат: