kursy, tutoriale
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ń.
Operacje tego typu możemy wykonywać na elementach takich jak:
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.
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:
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;
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
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…