Ostatnio edytowany:

object-position

Autor: Virtual Patriot

Opis 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. Mowa tu o treści reprezentowanej między innymi przez taki element HTML jak: element img, element embed, element object lub element video.

Dodatkowe techniczne informacje o właściwości object-position

przeznaczenie
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

nie

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

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

wzorzec wartości

Opis

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 pozycję początkową treści reprezentowanej przez interesujący nas element HTML (względem lewej krawędzi obszaru zawartości tego elementu 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 pozycję początkową treści reprezentowanej przez interesujący nas element HTML (względem górnej krawędzi obszaru zawartości tego elementu 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

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:#AFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>