object-positionWłaściwość jest używana w połączeniu z object-fitobiektu a także wyznacza, w jaki sposób element taki jak filmu lub obrazu jest umieszczony w układzie współrzędnych X / Y w środku jego zawartości pudełka. Ta właściwość przyjmuje dwie wartości liczbowe, takie jak 0 10%lub 0 10px. W tych przykładach pierwsza liczba wskazuje, że obraz powinien być umieszczony po lewej stronie pola treści (0), a druga, że powinien być umieszczony 10% lub 10 pikseli od góry. Możliwe jest również użycie wartości ujemnych.
Domyślną wartością dla object-positionjest 50% 50%użycie object-fitwłaściwości na obrazie, więc domyślnie wszystkie obrazy są umieszczane na środku pola zawartości, na przykład:
img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )Próbny
Poniżej znajduje się kilka przykładów, jak możemy manipulować object-positionobrazem z object-fitwłaściwością ustawioną na none. Jeśli treść obrazka z jakiegokolwiek powodu nie wypełnia pola treści, wówczas niewypełniona przestrzeń pokaże tło elementu, które może być kolorem lub nawet literą background-image, jak w ostatnim przykładzie:
Zobacz pozycję obiektu pióra autorstwa Robina Rendle (@robinrendle) na CodePen.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7,1 + * | 36+ | 26+ | ? | 4.4.4+ | 8,4 + * |
* Wsparcie dla, object-fitale nieobject-position