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