Object-fit häsiýeti

object-fit häsiýeti surat ýa-da wideo ýaly elementleriň tarap gatnaşyklaryny ýa-da masştablaýyşyny kesgitleýär.

Sintaksis

cssselektor {
  object-fit: fill ýa-da contain ýa-da cover ýa-da none;
}

Tabloda object-fit häsiýeti üçin esasy bahalar görkezilýär:

Baha	Düşündiriş
`fill`	Elementiň elementiň proporsiýalaryna üns berilmeýärkä, berlen ölçeglere gabat gelmek üçin masştablaýyşy.
`contain`	Elementiň elementiň proporsiýalary saklanylarka, berlen ölçeglere gabat gelmek üçin masştablaýyşy.
`cover`	Elementiň ölçegleri görkezilen meýdany doly doldurmak üçin üýtgedilýär, şol wagtyň özünde elementiň proporsiýalary saklanylýar.
`none`	Elementiň başdaky ölçegleri saklanylýar.

Suratymyza berlen ölçegi proporsiýalary saklamazdan doldurmagy belläýeliň:

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

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

Результат:

Indi bolsa, suratyň proporsiýalaryny saklap, görkezilen konteýneri doldurmak üçin edeliň:

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

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

Результат:

Görkezilen konteýneri suratymyz bilen şeýle dolduralyň, suratyň öz ölçegi üýtgesin, ýöne onuň proporsiýalary saklansyn:

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

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

Результат:

Görkezilen konteýneriň içine suratymyzy onuň başdaky ölçeglerini saklap goýalyň:

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

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

Результат: