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...
Cień pod obrazkiem, tekstem z użyciem CSS Czasami w celu uzyskania ciekawego efektu na stronie chcemy dodać naszym zdjęciom cień. Ten mały drobiazg może bardzo poprawić wygląd naszej witryny i...
Responsywne obrazki / zdjęcia z efektem Polaroid &... W jednym z wcześniejszych wpisów pisałam jak z użyciem PHP uzyskać efekt Polaroid dla zdjęć i ilustracji. Tym razem pokażę jak uzyskać ten sam efekt a...
Animowana ikona „Hamburger” menu Jak zapewne każdy z was zauważył, że na niektórych stronach internetowych (głównie mobilnych) menu pokazuje się dopiero po kliknięciu w ikonę (trzy li...