Własność CSS object-position określa położenie treści elementu zastępowanego w obszarze pola, które tworzy on na stronie.
W parze z nią można używać własności object-fit
, która określa sposób dopasowania treści elementu zastępowanego do jego obszaru pola.
Aby dokładnie zrozumieć sposób działania tej własności, należy przeczytać sekcję Praca z elementami zastępowanymi na stronie Własność CSS object-fit.
Wartości i składnia
Własność object-fit
przyjmuje od jednej do czterech wartości następujących typów:
- Słowa kluczowe:
left
,center
,right
,top
,bottom
- Liczba z jednostką długości
- Wartości procentowe
Wartości te określają dwuwymiarowe współrzędne położenia obiektu, ale dokładny sposób ich interpretacji zależy od ich liczby.
- Jedna wartość: jeśli zostanie podana jedna wartość, to przeglądarka automatycznie przyjmuje, że druga to
center
. Jeżeli więc użyjemy wartościleft
, to obiekt znajdzie się w przy lewej krawędzi pola elementu w połowie jej wysokości, a jeśli użyjemy wartościbottom
, to obiekt znajdzie się przy dolnej krawędzi pola elementu, na jej środku np.:<style> img { width: 350px; height: 250px; border: 1px solid lightpink; object-fit: none; object-position: bottom; /* Interpretowane jako "bottom center" */ } </style> ... <!-- Ten obraz ma wymiary 80 × 100 pikseli --> <img src="obraz.png">
Efekt:
- Dwie wartości: jeśli zostaną podane dwie wartości, to ich interpretacja zależy od tego, jakiego są typu.
- Dwa słowa kluczowe: słowa kluczowe są interpretowane zgodnie z ich znaczeniem, tzn.
left
(lewa),center
(środek),right
(prawa),top
(góra),bottom
(dół). Na przykład wartośćtop left
oznacza umieszczenie lewego górnego rogu obiektu w lewym górnym rogu pola elementu, abottom right
– umieszczenie prawego dolnego rogu obiektu w prawym dolnym rogu pola elementu. Kolejność słów kluczowych nie ma znaczenia, tzn. można na przykład napisać zarównotop left
, jak ileft top
. - Dwie liczby z jednostką długości lub wartości procentowe: wartości tych typów określają odległość lewego górnego rogu obiektu od lewego górnego rogu obszaru pola elementu albo mówiąc inaczej, pierwsza wartość określa odległość od lewej krawędzi, a druga – od górnej krawędzi obszaru pola, np.:
<style> img { width: 350px; height: 250px; border: 1px solid lightpink; object-fit: none; object-position: 40px 100px; } </style> ... <!-- Ten obraz ma wymiary 80 × 100 pikseli --> <img src="obraz.png">
Efekt:
Lewy górny róg obiektu jest odsunięty na odległość 40 pikseli od lewej i 100 pikseli od górnej krawędzi pola elementu.
- Jedno słowo kluczowe i jedna wartość liczbowa: typy wartości można także mieszać, np.:
object-position: 30% top; object-position: left 180px;
Należy jednak pamiętać, że w tym przypadku kolejność wartości jest istotna. Pierwsza powinna być wartość określające odległość od lewej krawędzi kontenera, a druga – od górnej. Dlatego dwie powyższe deklaracje są prawidłowe, a dwie poniższe nie:
object-position: top 30%; object-position: 180px left;
Pierwsza z tych deklaracji zawiera słowo kluczowe
top
, które odnosi się do górnej krawędzi, a więc powinno ono znajdować się na drugim miejscu.Z kolei druga z tych deklaracji zawiera słowo kluczowe
left
, które odnosi się do lewej krawędzi, a więc powinno ono znajdować się na pierwszym miejscu.
- Dwa słowa kluczowe: słowa kluczowe są interpretowane zgodnie z ich znaczeniem, tzn.
- Trzy lub cztery wartości: położenie obiektu można także określić za pomocą dwóch par wartości składających się ze słowa kluczowego i liczby (z jednostką lub wartości procentowej). Wartość liczbowa w każdej parze określa odległość od krawędzi wskazywanej przez słowo kluczowe, np.:
object-position: top 40px right 100px;
Powyższa deklaracja odsuwa obiekt na odległość 40 pikseli od górnej krawędzi i 100 pikseli od prawej krawędzi. Kolejność takich par nie ma znaczenia, tzn. obie poniższe wersje są poprawne:
object-position: top 40px right 100px; object-position: right 100px top 40px;
Jeśli zostaną podane tylko trzy wartości, tzn. dwa słowa kluczowe i jedna wartość liczbowa, to za brakującą wartość automatycznie jest przyjmowane zero.
Zastosowanie
Własność CSS object-fit
ma zastosowanie do elementów zastępowanych.
Podsumowanie
Zastosowanie | Elementy zastępowane |
---|---|
Obsługiwane wartości | |
Wartość początkowa | 50% 50% |
Dziedziczenie | Nie |
Specyfikacja | CSS Images Module Level 3 |