Atrybut Style objectFit

Definicja i użycie

objectFit Atrybut określa, jak rozmiar <img> lub <video> powinien być dostosowany, aby pasował do jego kontenera.

Ta właściwość informuje, w jaki sposób treść powinna być wypełniana kontenerem; na przykład "zachować proporcje szerokości i wysokości" lub "rozciągnąć i jak najwięcej zająć przestrzeń".

Inne źródła:

Kurs CSS:CSS object-fit

Podręcznik CSS:Atrybut object-fit

Przykład

Przytnij boki obrazu, zachowując proporcje szerokości i wysokości, i wypełnij przestrzeń:

document.getElementById("myImg").style.objectFit = "cover";

Spróbuj sam

Gramatyka

Zwrócenie atrybutu objectFit:

object.style.objectFit

Ustawienie atrybutu objectFit:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Wartość atrybutu

Wartość Opis
fill Domyślnie. Dostosuj rozmiar zastąpionej treści, aby wypełnić pole zawartości elementu. W razie potrzeby obiekt zostanie rozciągnięty lub zmniejszony.
contain Skaluj zastąpioną treść, aby utrzymać proporcje szerokości i wysokości, jednocześnie dopasowując ją do pola zawartości elementu.
cover Dostosuj rozmiar zastąpionej treści, aby utrzymać proporcje szerokości i wysokości podczas wypełniania całego pola zawartości elementu. Obiekt zostanie przycięty.
none Zastąpiona 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 Inherbuje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: fill
Wartość zwracana: Ciąg znaków, który oznacza rozmiar elementu Atrybut object-fit.
Wersja CSS: CSS3

Obsługa przeglądarki

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

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