Właściwość CSS object-position służy do określania pozycji początkowej (położenia początkowego) wybranego elementu HTML w kontenerze.
Nie chodzi tu jednak o kontener w postaci np. <div> a o „sam obiekt” w ramach, którego wyświetlany jest sam obiekt. Dlatego właściwość używana jest głównie w przypadku zniekształceń.
Obiekty HTML jakimi możemy manipulować
Operacje tego typu możemy wykonywać na elementach takich jak:
- img,
- embed,
- object,
- video.
Powyższe elementy możemy więc ustawiać w dowolnym miejscu w obrębie okalającego kontenera. Właściwość ta jest zawsze używana z object-fit.
Właściwość ta może być użyteczna np. w przypadku gdy obrazek ma inne wymiary na stronie niż w rzeczywistości. Zamiast więc go zniekształcać z pomocą object-position go tak jak by przytniemy. W efekcie obraz może przestać być zniekształcony a my zobaczymy jego określony fragment.
Jak korzystać z object-position
Domyślną wartością dla object-position jest 50% 50%. W efekcie obiekt jest wycentrowany względem kontenera. Jednak w przypadku gdy rozmiar kontenera będzie inny niż rzeczywisty rozmiar obrazka na stronie obraz zostanie zniekształcony (rozciągnięty).
Dopiero dodanie właściwość object-fit: none; zredukuje te zniekształcenie. Skalując obraz do naturalnego rozmiaru wewnątrz kontenera.
Przykładowe dopuszczalne wartości i ich połączenia:
- right
- right bottom
- 30px
- 30px -120px
- top -25%
Jak widać dopuszczalne są wartości dodatnie oraz ujemne. Posiadamy również możliwość stosowania różnych jednostek.
Przykłady zastosowania:
Pierwszy obrazek nie posiada ustawienia object-fit: none;
See the Pen object-position CSS by Aura (@Julka85) on CodePen.
Jak widać obrazki są praktycznie identyczne. Jedyną różnice stanową klasy CSS.
Objaśnienie do object-fit
Efekty uzyskane z pomocą tej właściwość mogą być wykorzystane podczas tworzenia różnego typu animacji na stronach internetowych. Dlatego myślę, że warto wiedzieć o jej istnieniu.
Obsługa przeglądarek
| Chrome | Opera | Firefox | IE | Edge | Safari |
|---|---|---|---|---|---|
| TAK | TAK | 36 | NIE | Nie | TAK |
Źródła:
http://webkod.pl/kurs-css/wlasciwosci/wszystkie/object-position
https://css-tricks.com/almanac/properties/o/object-position/
Dodatkowe tagi:
pozycjonowanie obrazka w kontenerze
obrazek z właściwościami tła
dopasowywanie do div bez zniekształcania
pozycja obiektu
Charakterystyka właściwości object-position
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.