Pozycjonowanie obrazka z CSS – object-position

kursy, tutoriale

Kategoria wpisu Kurs CSS Tagi: , , , , , , , on przez .



object-position służy do określania pozycji początkowej wybranego elementu HTML w kontenerze. Chodzi elementy takie jak img, embed, object czy video.

Domyślną wartością dla object-position jest 50% 50% daje to efekt wycentrowania obiektu w kontenerze.

Przykładowe dopuszczalne wartości i ich połączenia:

  • right
  • right bottom
  • 30px
  • 30px -120px
  • top -25%

Jak widać dopuszczalne są wartości dodatnie, ujemne zapisywane w różnych jednostkach.

Przykłady zastosowania:

Oryginalny obrazek
object-position: 50% 50%;
object-position: 50% -20%;
object-position: 120% 50%;
object-position: -20% 50%;
object-position: 100% 100%;
object-position: 0 100%;
object-position: 50% 120%;
object-position: 0 0;

Tak to wygląda w HTML

Powyższe efekty na zdjęciach uzyskałam dzięki:

– Wspólne CSS do wszystkich zdjęć

Objaśnienie do object-fit

– CSS dające efekty

Powyższa właściwość jest bardzo użyteczna przy tworzeniu różnego typu animacji na stronach internetowych.

Obsługa przeglądarek

ChromeOperaFirefoxIEEdgeSafari
TAKTAK36NIENieTAK

Źródła:
http://webkod.pl/kurs-css/wlasciwosci/wszystkie/object-position

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

Przeczytaj również

Dopasowywanie obrazka do rozmiaru obszaru CSS3 ... Dzięki właściwości object-fit jesteśmy w stanie określić w jaki sposób interesujący nas element HTML (np. obrazek) powinien wypełnić dany obszar na st...
Zaokrąglenie narożników z pomocą CSS Zaokrąglanie rogów dowolnego obiektu HTML (guzika, fotografii, obrazka, div) z pomocą CSS3 jest bardzo proste. Do tego celu nie potrzebujemy żadnych d...
Rodzaje kursora myszy Czasami w celu uatrakcyjnienia witryny internetowej chcemy zmienić kształty kursora myszy. Nie potrzebujemy do tego wszędzie obecnego JS wystarczy nam...
Figury geometryczne z użyciem CSS Pojawienie się CSS3 dało bardzo duże możliwości twórcą stron internetowych (ale nie tylko) a w połączenia z HTML5 zmieniło kodowanie stron w prawdziwe...