Pozycjonowanie obrazka w obrębie kontenera z CSS – object-position

Czas czytania: < 1 minut

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-fitnone;

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

ChromeOperaFirefoxIEEdgeSafari
TAKTAK36NIENieTAK

Ź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