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

selektor {
	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ň:

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

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

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

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

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

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

img {
	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ň:

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

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