object-fit хусусияти

object-fit хусусияти расм ёки видео каби элементларнинг томонлар нисбати ёки масштабини белгилайди.

Синтаксис

cssселектор {
  object-fit: fill ёки contain ёки cover ёки none;
}

object-fit хусусияти учун асосий қийматлар жадвалда келтирилган:

Қиймат	Изоҳ
`fill`	Элементнинг пропорциялари инкор этилиши билан, белгиланган ўлчамларга мос келиши учун элементни масштаблаш.
`contain`	Элементнинг пропорциялари сақланиши билан, белгиланган ўлчамларга мос келиши учун элементни масштаблаш.
`cover`	Элементнинг пропорциялари сақланиши билан, кўрсатилган соҳани тўлиқ тўлдириш учун элемент ўлчамларини ўзгартириш.
`none`	Элементнинг бошланғич ўлчамлари сақланади.

>Келтирилган расмга пропорцияларни сақламасдан, белгиланган ўлчамни тўлдиришни белгилаймиз:

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

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

Результат:

>Энди расм пропорцияларни сақлаб, белгиланган контейнерни тўлдирсин деб қилайлик:

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

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

Результат:

>Келтирилган расм ўзининг пропорциялари сақланиши билан, белгиланган контейнерни тўлдирсин ва ўлчами ўзгарсин деб қилайлик:

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

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

Результат:

>Келтирилган расм ўзининг бошланғич ўлчамлари сақланган ҳолда, белгиланган контейнерга жойлашунини белгилаймиз:

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

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

Результат: