Object-fit xassəsi

object-fit xassəsi şəkil və ya video kimi elementlərin en-boy nisbətini və ya miqyaslasdirilmasını təyin edir.

Sintaksis

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

Cədvəl object-fit xassəsi üçün əsas dəyərləri təqdim edir:

Dəyər	Təsvir
`fill`	Elementin verilmiş ölçülərə uyğunlasdirilmasi, bu zaman elementin nisbətləri nəzərə alınmır.
`contain`	Elementin verilmiş ölçülərə uyğunlasdirilmasi, bu zaman elementin nisbətləri qorunur.
`cover`	Elementin ölçüləri göstərilən sahəni tam doldurmaq üçün dəyisir, bu zaman elementin öz nisbətləri qorunur.
`none`	Elementin orijinal ölçüləri qorunur.

Gəlin şəklimizə verilmiş ölçünü nisbətləri qorunmadan dolduraq:

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

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

İndi isə gəlin şəklin göstərilən konteyneri nisbətləri qoruyaraq doldurmasını təmin edək:

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

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

Gəlin şəklimizlə göstərilən konteyneri elə dolduraq ki, şəklin öz ölçüsü dəyissin, lakin onun nisbətləri qorunsun:

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

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

Gəlin şəklimizi sadəcə göstərilən konteynerin icinə onun orijinal ölçülərini qoruyaraq yerləsdirək:

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

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