Az object-fit tulajdonság

Az object-fit tulajdonság meghatározza a képarányt vagy méretezést olyan elemeknél, mint a kép vagy videó.

Szintaxis

szelektor {
	object-fit: fill vagy contain vagy cover vagy none;
}

A táblázat az object-fit tulajdonság főbb értékeit mutatja be:

Érték	Leírás
`fill`	Az elem méretezése a megadott méreteknek megfelelően, miközben az elem arányait figyelmen kívül hagyja.
`contain`	Az elem méretezése a megadott méreteknek megfelelően, miközben az elem arányai megmaradnak.
`cover`	Az elem méretei úgy változnak, hogy teljesen kitöltsék a megadott területet, miközben az elem saját arányai megmaradnak.
`none`	Az elem eredeti méretei megmaradnak.

Állítsuk be a képünknek a megadott méret kitöltését az arányok megőrzése nélkül:

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

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

Most pedig tegyük úgy, hogy a kép kitöltse a megadott tárolót az arányok megőrzésével:

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

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

Töltsük ki a képünkkel a megadott tárolót úgy, hogy magának a képnek a mérete változzon, de közben az arányai megmaradjanak:

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

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

Egyszerűen helyezzük el a képünket a megadott tárolóban, megtartva annak eredeti méreteit:

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

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