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;
}

Результат: