Egenskaben object-fit

Egenskaben object-fit angiver billedformat eller skalering af elementer som billeder eller video.

Syntaks

selektor {
	object-fit: fill eller contain eller cover eller none;
}

Tabellen viser hovedværdierne for egenskaben object-fit:

Værdi	Beskrivelse
`fill`	Skalering af elementet for at matche de angivne dimensioner, hvor elementets proportioner ignoreres.
`contain`	Skalering af elementet for at matche de angivne dimensioner, hvor elementets proportioner bevares.
`cover`	Elementets dimensioner ændres for fuldstændigt at fylde det angivne område, hvor proportionerne af selve elementet bevares.
`none`	Elementets oprindelige dimensioner bevares.

Lad os give vores billede en udfyldning af den angivne størrelse uden at bevare proportioner:

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

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

Og lad os nu gøre det sådan, at billedet fylder den angivne container med bevarelse af proportioner:

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

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

Lad os fylde vores container med vores billede på sådan en måde, at størrelsen på selve billedet ændres, men samtidig bevares dens proportioner:

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

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

Lad os blot placere vores billede i den angivne container med bevarelse af dens oprindelige størrelse:

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

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