Egenskapen object-fit

Egenskapen object-fit setter sideforholdet eller skaleringen av elementer som bilder eller video.

Syntaks

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

Tabellen nedenfor viser hovedverdiene for egenskapen object-fit:

Verdi	Beskrivelse
`fill`	Skalerer elementet for å fylle de oppgitte dimensjonene, men ignorerer elementets proporsjoner.
`contain`	Skalerer elementet for å passe inn i de oppgitte dimensjonene, og bevarer elementets proporsjoner.
`cover`	Elementets dimensjoner endres for å fylle hele det angitte området, mens proporsjonene til elementet beholdes.
`none`	Elementets opprinnelige dimensjoner beholdes.

La oss sette bildet vårt til å fylle de angitte dimensjonene uten å bevare proporsjonene:

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

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

La oss nå gjøre slik at bildet fyller den angitte beholderen mens proporsjonene bevares:

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

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

La oss fylle beholderen vår med bildet vårt slik at størrelsen på bildet selv endres, men samtidig bevares dens proporsjoner:

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

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

La oss bare plassere bildet vårt i den angitte beholderen med dens opprinnelige dimensjoner intakt:

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

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