Egenskapen object-fit

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

Syntax

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

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

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

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

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

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

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

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

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

Результат: