Vetia object-fit

Vetia object-fit përcakton raportin e pamjeve ose shkallëzimin e elementeve të tilla si imazhet ose videot.

Sintaksa

përzgjedhësi {
	object-fit: fill ose contain ose cover ose none;
}

Në tabelë janë paraqitur vlerat kryesore për vetinë object-fit:

Vlerat

Vlera	Përshkrimi
`fill`	Shkallëzimi i elementit për t'iu përshtatur përmasave të dhëna, duke shpërfillur raportet e pamjeve të elementit.
`contain`	Shkallëzimi i elementit për t'iu përshtatur përmasave të dhëna, duke ruajtur raportet e pamjeve të elementit.
`cover`	Përmasat e elementit ndryshohen, për të mbushur plotësisht zonën e specifikuar, duke ruajtur raportet e pamjeve të vetë elementit.
`none`	Përmasat origjinale të elementit ruhen.

Shembull

Le t'i caktojmë imazhit tonë mbushjen e përmasave të specifikuara pa ruajtur raportet e pamjeve:

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

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

Shembull

Tani le ta bëjmë që imazhi të mbushë kontenierin e specifikuar duke ruajtur raportet e pamjeve:

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

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

Shembull

Le ta mbushim me imazhin tonë kontenierin e specifikuar në mënyrë që madhësia e vetë imazhit të ndryshojë, por duke ruajtur raportet e tij të pamjeve:

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

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

Shembull

Le ta vendosim thjesht imazhin tonë në kontenierin e specifikuar duke ruajtur përmasat e tij origjinale:

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

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

Shihni gjithashtu

vetia aspect-ratio,
e cila përcakton raportin e pamjeve të elementit