Własność CSS object-position

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ści left, to obiekt znajdzie się w przy lewej krawędzi pola elementu w połowie jej wysokości, a jeśli użyjemy wartości bottom, 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, a bottom 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ówno top left, jak i left 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.

• 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