Egenskapen object-fit

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

Syntaks

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

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

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

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

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

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

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

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

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

Результат: