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