Atrybut CSS object-fit
- Poprzednia strona CSS stylizacja obrazów
- Następna strona CSS object-position
CSS object-fit Atrybut jest używany do określenia tego, jak należy dostosować rozmiar <img> lub <video>, aby dopasować się do jego kontenera.
Wsparcie przeglądarki
Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.
| Atrybut | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Atrybut CSS object-fit
CSS object-fit Atrybut jest używany do określenia tego, jak należy dostosować rozmiar <img> lub <video>, aby dopasować się do jego kontenera.
Ta właściwość informuje, w jaki sposób zawartość ma być wypełniana kontenerem. Na przykład „utrzymać proporcje” lub „rozszerzyć i zająć jak najwięcej przestrzeni”.
Spójrz na poniższy obraz tulipanów z Shanghai Flower Harbor, który ma wymiar 300x300 pikseli:
Ale, jeśli ustawimy powyższy obraz na 200x300 pikseli, będzie wyglądał tak:
Przykład
img {
width: 200px;
height: 300px;
}
widzimy, że obraz jest skompresowany, aby dopasować się do kontenera o wymiarach 200x300 pikseli, a oryginalne proporcje są zniszczone.
Jeśli używamy object-fit: cover;to przycina boki obrazu, utrzymuje proporcje długości i szerokości, a następnie wypełnia przestrzeń, jak pokazano poniżej:
Przykład
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Inny przykład
W tym przypadku mamy dwa obrazy, które chcemy wypełnić 50% szerokości i 100% wysokości okna przeglądarki.
W następnym przykładzie nie używamy object-fit, więc, gdy dostosowujemy rozmiar okna przeglądarki, proporcje długości i szerokości obrazu zostaną zniszczone:
Przykład
W następnym przykładzie używamy object-fit: cover;, więc, gdy dostosowujemy rozmiar okna przeglądarki, utrzymujemy proporcje długości i szerokości obrazu:
Przykład
Wszystkie wartości atrybutu CSS object-fit
object-fit Atrybut akceptuje następujące wartości:
fill- Domyślna wartość. Dostosuj rozmiar zastępczej treści, aby wypełnić pole zawartości elementu. W razie potrzeby rozciągnij lub skurcz obiekt, aby dopasować się do tego obiektu.contain- Skaluj zastępczą treść, aby utrzymać proporcje pionowe i poziome, jednocześnie umieszczając ją w polu zawartości elementu.cover- Dostosuj rozmiar zastępczej treści, aby utrzymać proporcje długości i szerokości podczas wypełniania całego pola zawartości elementu. Obiekt zostanie przycięty, aby dopasować się.none- Nie dostosowuje rozmiaru zastępczej treści.scale-down- Dostosowanie rozmiaru treści tak, jakby nie było określonej treści lub zawartości (powoduje mniejszy konkretny rozmiar obiektu)
Poniższe przykłady pokazują object-fit Wszystkie możliwe wartości atrybutu:
Przykład
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- Poprzednia strona CSS stylizacja obrazów
- Następna strona CSS object-position
