Własność CSS object-fit

Własność CSS object-fit określa sposób dostosowywania obiektu reprezentowanego przez element zastępowany (np. img albo video) do pola tworzonego przez ten element na podstawie ustawień własności width i height.

Własność ta umożliwia pracę z elementami zastępowanymi w specyficzny sposób, ponieważ pozwala na oddzielenie reprezentowanego obiektu od pola elementu, który go reprezentuje.

Praca z elementami zastępowanymi

Każdy element zastępowany, taki jak na przykład img, w pewnym sensie składa się z dwóch części. Jedną z nich jest obiekt, który ten element reprezentuje, a więc na przykład obraz, którego adres podajemy w atrybucie src. A drugą jest pole generowane przez algorytmy CSS dla tego elementu na stronie.

W normalnej sytuacji, tzn. gdy nie używamy własności object-fit, obie te części mają takie same wymiary. Weźmy na przykład poniższy element img i przyjmijmy, że nie odnoszą się do niego żadne reguły CSS:

<img src="obraz.png" width="400" height="600">

W tym przypadku zarówno pole elementu img, jak i rozmiar reprezentowanego przez niego obrazu, mają takie same wymiary – 400 × 600 pikseli. Jeśli wymiary naturalne obrazu są inne, to zostanie on odpowiednio przeskalowany. Tak samo się stanie w przypadku, gdy wymiary zdefiniujemy za pomocą własności CSS width i height, np.:

img {
  width: 400px;
  height: 600px;
}

Jeśli jednak użyjemy własności object-fit (o jakiejkolwiek wartości), to sytuacja się zmieni, ponieważ spowoduje to „rozdzielenie” tych dwóch warstw tak, że będziemy mogli z nimi pracować niezależnie, np.:

img {
  width: 350px;
  height: 250px;
  object-fit: none;
  border: 1px solid lightpink;
}

Ten element img będzie tworzył na stronie pole o szerokości 350 pikseli i wysokości 250 pikseli, które będzie miało obramowanie w postaci jednolitej linii o szerokości jednego piksela w kolorze różowym.

Powiedzmy teraz, że na stronę, na której działa powyższa reguła CSS , za pomocą elementu img wstawiliśmy obraz PNG o wymiarach 80 × 100 pikseli:

<!-- Ten obraz ma wymiary 80 × 100 pikseli -->
<img src="obraz.png">

Efekt tego byłby następujący:

Wartość none własności object-fit powoduje, że obiekt reprezentowany przez element zastępowany nie zmienia rozmiaru.

Gdybyśmy usunęli deklarację object-fit: none z powyższej reguły, to ten element wyglądałby tak:

Zgodnie z oczekiwaniami, obraz zostałby dopasowany rozmiarem do rozmiaru elementu, który go reprezentuje.

Wartości i składnia

Własność object-fit jako wartość przyjmuje jedno z następujących słów kluczowych: contain, cover, fill, none, scale-down.

contain

Reprezentowany obiekt jest dopasowywany rozmiarem do pola treści elementu przy zachowaniu oryginalnych proporcji. Oznacza to, że w zależności od jego wymiarów, „wypełni” on element w pionie lub w poziomie, a w drugim wymiarze będzie pozostawiona pewna ilość pustego miejsca, chyba że współczynnik kształtu reprezentowanego obiektu będzie taki sam, jak pola elementu, np.:

<style>
img {
  width: 350px;
  height: 250px;
  object-fit: contain;
  border: 1px solid lightpink;
}
</style>
...
<!-- Ten obraz ma wymiary 80 × 100 pikseli -->
<img src="obraz.png">

Efekt:

cover

Rozmiar reprezentowanego obiektu jest zwiększany z zachowaniem proporcji w taki sposób, aby wypełniać pole reprezentującego go elementu zarówno w pionie, jak i w poziomie, np.:

<style>
img {
  width: 350px;
  height: 250px;
  object-fit: cover;
  border: 1px solid lightpink;
}
</style>
...
<!-- Ten obraz ma wymiary 80 × 100 pikseli -->
<img src="obraz.png">

Efekt:

fill

Reprezentowany obiekt wypełnia całe pole elementu w taki sposób, że jest w całości widoczny (porównaj z działaniem słowa kluczowego cover). Jeśli jego proporcje kształtu są inne niż proporcje tego pola, to zostaje odpowiednio rozciągnięty, np.:

<style>
img {
  width: 350px;
  height: 250px;
  object-fit: fill;
  border: 1px solid lightpink;
}
</style>
...
<!-- Ten obraz ma wymiary 80 × 100 pikseli -->
<img src="obraz.png">

Efekt:

none

Rozmiar reprezentowanego obiektu pozostaje niezmieniony, np.:

<style>
img {
  width: 350px;
  height: 250px;
  object-fit: none;
  border: 1px solid lightpink;
}
</style>
...
<!-- Ten obraz ma wymiary 80 × 100 pikseli -->
<img src="obraz.png">

Efekt:

scale-down

Rozmiar obiektu jest zmieniany tak, jakby zostało użyte słowo kluczowe none lub contain, w zależności od tego, które da w wyniku mniejszy rozmiar.

Zastosowanie

Własność CSS object-fit ma zastosowanie do elementów zastępowanych.

Podsumowanie