Właściwość object-fit

Właściwość object-fit ustawia proporcje lub skalowanie takich elementów jak obraz lub wideo.

Składnia

cssselektor {
  object-fit: fill lub contain lub cover lub none;
}

W tabeli przedstawiono główne wartości dla właściwości object-fit:

Wartość	Opis
`fill`	Skalowanie elementu dla dopasowania do podanych wymiarów, przy czym proporcje elementu są ignorowane.
`contain`	Skalowanie elementu dla dopasowania do podanych wymiarów, przy czym proporcje elementu są zachowywane.
`cover`	Wymiary elementu są zmieniane, aby całkowicie wypełnić określony obszar, przy czym proporcje samego elementu są zachowywane.
`none`	Oryginalne wymiary elementu są zachowywane.

Ustawmy naszemu obrazowi wypełnienie określonego rozmiaru bez zachowania proporcji:

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

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

Результат:

A teraz sprawmy, aby obraz wypełnił określony kontener z zachowaniem proporcji:

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

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

Результат:

Wypełnijmy naszym obrazem określony kontener tak, aby rozmiar samego obrazu się zmienił, ale przy tym zostały zachowane jego proporcje:

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

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

Результат:

Po prostu umieśćmy nasz obraz w określonym kontenerze z zachowaniem jego oryginalnych rozmiarów:

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

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

Результат: