object-fit xususiyati

object-fit xususiyati rasm yoki video kabi elementlarning aspekt nisbati yoki masshtabini belgilaydi.

Sintaksis

selektor {
	object-fit: fill yoki contain yoki cover yoki none;
}

object-fit xususiyati uchun asosiy qiymatlar jadvalda keltirilgan:

Qiymat	Tavsif
`fill`	Elementning nisbatlarini hisobga olmasdan, berilgan o‘lchamlarga moslashtirish uchun elementni masshtablash.
`contain`	Elementning nisbatlarini saqlab qolgan holda, berilgan o‘lchamlarga moslashtirish uchun elementni masshtablash.
`cover`	Elementning o‘lchamlari ko‘rsatilgan sohani to‘liq to‘ldirish uchun o‘zgartiriladi, shu bilan birga elementning nisbatlari saqlanib qolinadi.
`none`	Elementning asl o‘lchamlari saqlanib qolinadi.

Keling, rasmimizga nisbatlarni saqlamasdan belgilangan o‘lchamni to‘ldirishni belgilaymiz:

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

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

Endi esa, rasm nisbatlarini saqlab qolgan holda belgilangan konteynerni to‘ldirishni amalga oshiramiz:

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

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

Keling, rasmimizning o‘lchami o‘zgarsin, lekin uning nisbatlari saqlanib qolsin sharti bilan belgilangan konteynerni to‘ldiramiz:

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

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

Keling, rasmimizni uning asl o‘lchamlarini saqlab qolgan holda belgilangan konteyerni ichiga joylashtiramiz:

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

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