Eienskap object-fit

Die eienskap object-fit spesifiseer die aspekverhouding of skaalering van elemente soos beeld of video.

Sintaksis

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

Die tabel toon die hoofwaardes vir die eienskap object-fit:

Waarde	Beskrywing
`fill`	Skaal die element om by die gespesifiseerde afmetings te pas, terwyl die element se verhoudings geïgnoreer word.
`contain`	Skaal die element om by die gespesifiseerde afmetings te pas, terwyl die element se verhoudings behou word.
`cover`	Die element se afmetings word aangepas om die gespesifiseerde area volledig te vul, terwyl die verhoudings van die element self behou word.
`none`	Die element se oorspronklike afmetings word behou.

Kom ons stel ons beeld se vul van die gespesifiseerde grootte in sonder om die verhoudings te behou:

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

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

En nou, laat ons die beeld die gespesifiseerde houer laat vul terwyl die verhoudings behou word:

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

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

Kom ons vul die gespesifiseerde houer met ons beeld sodat die grootte van die beeld self verander, maar terwyl sy verhoudings behou word:

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

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

Kom ons plaas eenvoudig ons beeld in die gespesifiseerde houer terwyl sy oorspronklike afmetings behou word:

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

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