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

Результат: