Pozycjonowanie obrazka z CSS – object-position

kursy, tutoriale

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



Reading Time: 3 minutes

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 roboczeg... Z pomocą właściwości object-fit określamy w jaki sposób interesujący nas element HTML (np. obrazek) powinien wypełnić dany obszar na stronie interneto...
Pozycjonowanie tekstu i obrazków z pomocą CSS W jednym z poprzednich wpisów pokazałam w jaki sposób wyśrodkować obrazek lub tekst wykorzystując do tego czysty HTML. Tym razem pójdę o krok dalej i ...
Gradient z wykorzystaniem CSS3 jako tło strony Słowo gradient kojarzy nam się zwykle z obrazkiem posiadającym bardzo ciekawą kolorystykę np. przechodzącym z jednej barwy w drugą. Jeszcze niedawn...
Zmiana koloru zaznaczenia właściwość CSS ::selecti... Jak zapewne każdy zauważył podczas zaznaczania na stronie internetowej fragmentu tekstu tło pod nim zmienia on kolor np. na ciemno niebieski (w zależn...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *