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
lubcontain
, 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
Zastosowanie | Elementy zastępowane |
---|---|
Obsługiwane wartości | Słowa kluczowe: contain , cover , fill , none , scale-down |
Wartość początkowa | fill |
Dziedziczenie | Nie |
Specyfikacja | CSS Images Module Level 3 |