Pozycjonowanie obrazka z CSS – object-position

kursy, tutoriale

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


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 4,00 z 5)
Loading...

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

Dodaj komentarz

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