Ominaisuus object-fit

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

Syntaksi

cssvalitsija {
  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:

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

cssimg {
  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:

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

cssimg {
  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:

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

cssimg {
  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:

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

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

Результат: