Ominaisuus object-fit

Ominaisuus object-fit määrittää kuvasuhteen tai skaalauksen elementeille kuten kuville tai videoille.

Syntaksi

valitsija {
	object-fit: fill tai contain tai cover tai none;
}

Taulukossa esitetään object-fit-ominaisuuden pääarvot:

Arvo	Kuvaus
`fill`	Elementin skaalaus vastaamaan annettuja mittoja, jolloin elementin mittasuhteet jätetään huomiotta.
`contain`	Elementin skaalaus vastaamaan annettuja mittoja, jolloin elementin mittasuhteet säilyvät.
`cover`	Elementin koko muutetaan täyttämään koko määritetyn alueen, jolloin elementin mittasuhteet säilyvät.
`none`	Elementin alkuperäiset mitat säilyvät.

Asetetaan kuvamme täyttämään määritetyn koon säilyttämättä mittasuhteita:

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

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

Tehdään nyt niin, että kuva täyttää määritetyn säilön mittasuhteiden säilyttämisen kanssa:

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

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

Täytetään kuvamme määritetty säiliö niin, että kuvan koko muuttuu, mutta sen mittasuhteet säilyvät:

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

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

Asetetaan kuvamme yksinkertaisesti määritettyyn säiliöön säilyttäen sen alkuperäiset mitat:

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

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