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

cssselektor {
  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:

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

cssimg {
  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:

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

cssimg {
  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:

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

cssimg {
  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:

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

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

Результат: