object-fit қасиеті

object-fit қасиеті сурет немесе бейне сияқты элементтердің көлденең қатынасын немесе масштабтауын орнатады.

Синтаксис

селектор {
	object-fit: fill немесе contain немесе cover немесе none;
}

Кестеде object-fit қасиетінің негізгі мәндері көрсетілген:

Мән	Сипаттама
`fill`	Элементтің берілген өлшемдерге сәйкес келу үшін масштабтау, бұл ретте элементтің пропорциялары ескерілмейді.
`contain`	Элементтің берілген өлшемдерге сәйкес келу үшін масштабтау, бұл ретте элементтің пропорциялары сақталады.
`cover`	Элементтің өлшемдері көрсетілген аймақты толығымен толтыру үшін өзгертіледі, бұл ретте элементтің өз пропорциялары сақталады.
`none`	Элементтің түпнұсқа өлшемдері сақталады.

Біздің суретке пропорцияларды сақтамай, көрсетілген өлшемді толтыру тағайындайық:

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

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

Енді пропорцияларды сақтай отырып, суреттің көрсетілген контейнерді толтыруын жасайық:

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

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

Біздің суреттің өз пропорциялары сақталып, көрсетілген контейнерді толтыру үшін өлшемі өзгертуін жасайық:

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

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

Біздің суретті түпнұсқа өлшемдерін сақтай отырып, көрсетілген контейнерге орналастырайық:

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

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