Autor publikacji
Virtual Patriot - Administrator

object-position

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości object-position

Za pomocą właściwości object-position możemy określić pozycję początkową treści reprezentowanej przez interesujący nas element HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości object-position

przeznaczenie

element img, element embed, element object lub element video

pozycja

dowolna

dziedziczenie

nie

wartość initial

50% 50%

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości object-position

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości object-position

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości object-position oraz z góry zdefiniowanego wzorca wartości możemy określić pozycję początkową treści reprezentowanej przez interesujący nas element HTML.

Składniki wzorca wartości właściwości object-position

Przykładowe zapisy

right

right bottom

30px

30px -120px

top -25%

x

Składnik x jest wymaganym składnikiem wzorca wartości właściwości object-position. Składnik x określa względem lewej krawędzi obszaru zawartości pozycję początkową treści reprezentowanej przez interesujący nas element HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub pojedyncza wartość pozycjonująca (bez wartości top oraz wartości bottom)

Wartości dodatnie

wartości dodatnie przesuwają treść reprezentowaną przez element HTML w prawo względem lewej krawędzi obszaru zawartości tego elementu HTML

Wartości ujemne

wartości ujemne przesuwają treść reprezentowaną przez element HTML w lewo względem lewej krawędzi obszaru zawartości tego elementu HTML

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości pustej przestrzeni, jaka pozostała w rozmiarze szerokości obszaru zawartości elementu HTML reprezentującego treść, której pozycję chcemy określić

Wartość domyślna

brak

y

Składnik y nie jest wymaganym składnikiem wzorca wartości właściwości object-position. Składnik y określa względem górnej krawędzi obszaru zawartości pozycję początkową treści reprezentowanej przez interesujący nas element HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub pojedyncza wartość pozycjonująca (bez wartości left oraz wartości right)

Wartości dodatnie

wartości dodatnie przesuwają treść reprezentowaną przez element HTML w dół względem górnej krawędzi obszaru zawartości tego elementu HTML

Wartości ujemne

wartości ujemne przesuwają treść reprezentowaną przez element HTML w górę względem górnej krawędzi obszaru zawartości tego elementu HTML

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości pustej przestrzeni, jaka pozostała w rozmiarze wysokości obszaru zawartości elementu HTML reprezentującego treść, której pozycję chcemy określić

Wartość domyślna

center

Przykład

  object-position:25px 50px;
pozycja początkowa obrazka po dodaniu do elementu img właściwości object-position wraz z wartością 25px 50px

Pozycja początkowa obrazka "zwierze-01.png" reprezentowanego przez przykładowy element "img" znajduje się w odległości 25 pikseli od lewej krawędzi obszaru zawartości przykładowego elementu "img" oraz znajduje się w odległości 50 pikseli od górnej krawędzi obszaru zawartości przykładowego elementu "img", ponieważ do wspomnianego elementu "img" została dodana właściwość "object-position" wraz z następującymi wartościami: "25px 50px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        object-position:25px 50px;
        width:250px;
        height:400px;
        border:10px dashed black;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>