Egenskapen object-fit

Egenskapen object-fit anger bildförhållande eller skalning av element som bilder eller video.

Syntax

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

I tabellen presenteras huvudvärdena för egenskapen object-fit:

Värde	Beskrivning
`fill`	Skalar elementet för att passa de angivna dimensionerna, elementets proportioner ignoreras.
`contain`	Skalar elementet för att passa de angivna dimensionerna, elementets proportioner bevaras.
`cover`	Elementets dimensioner ändras för att helt fylla det angivna området, elementets egna proportioner bevaras.
`none`	Elementets ursprungliga dimensioner bevaras.

Låt oss ge vår bild en fyllning av den angivna storleken utan att bevara proportionerna:

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

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

Och låt oss nu göra så att bilden fyller den angivna containern med bevarande av proportionerna:

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

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

Låt oss fylla vår behållare med vår bild så att storleken på själva bilden ändras, men dess proportioner bevaras:

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

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

Låt oss helt enkelt placera vår bild i den angivna containern med bevarande av dess ursprungliga storlek:

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

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