CSS właściwość object-fit

Definicja i użycie

Atrybut objectFit określa, jak należy dostosować rozmiar <img> lub <video>, aby dostosować go do jego kontenera.

Ta właściwość informuje, w jaki sposób treść jest wypełniana kontenerem. Na przykład "zachowanie proporcji" lub "rozszerzenie i zającie jak najwięcej przestrzeni".

Zobacz również:

Tutorial CSSCSS object-fit

Podręcznik CSSCSS object-position

Podręcznik HTML DOMAtrybut objectFit

Przykład

Przycięcie obu stron obrazu, zachowanie proporcji, a następnie wypełnienie przestrzeni:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Spróbuj sam

Gramatyka CSS

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Wartość atrybutu

Wartość Opis
fill Domyślna wartość. Dostosuj rozmiar zastępującej treści, aby wypełnić ramkę zawartości elementu. W razie potrzeby obiekt zostanie rozciągnięty lub zmniejszony.
contain Skaluj zastępującą treść, aby utrzymać proporcje, jednocześnie dopasowując ją do ramki zawartości elementu.
cover Dostosuj rozmiar zastępującej treści, aby utrzymać proporcje podczas wypełniania całego obszaru wypełniającego element. Obiekt zostanie przycięty.
none Zastępująca treść nie zostanie dostosowana do rozmiaru.
scale-down Rozmiar treści jest taki sam jak none lub contain, w zależności od tego, który z nich uzyskuje mniejszy rozmiar obiektu.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: Zobacz osobne atrybuty.
Inherencja: nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.objectFit="cover"

Wsparcie przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0