29. Jak działa właściwość `object-fit` w CSS?

Właściwość object-fit w CSS określa, jak zawartość elementu, takiego jak obraz lub wideo, jest skalowana w stosunku do jego kontenera. Jest to przydatne, gdy trzeba dopasować obraz do kontenera o stałych wymiarach.

Przykłady użycia object-fit:

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Wartości object-fit:

1. fill - domyślna wartość, rozciąga obraz, aby wypełnić kontener.
2. contain - skaluje obraz, aby zmieścił się w kontenerze, zachowując proporcje.
3. cover - skaluje obraz, aby wypełnił kontener, zachowując proporcje, może przyciąć obraz.
4. none - obraz nie jest skalowany, jest wyświetlany w oryginalnych wymiarach.
5. scale-down - skaluje obraz w zależności od tego, która wartość jest mniejsza, none lub contain.

Przykład:

<img src="example.jpg" style="object-fit: cover;">