Ostatnio edytowany:

image-orientation

Autor: Virtual Patriot

Opis właściwości image-orientation

Za pomocą właściwości image-orientation możemy określić w jaki sposób treść reprezentowana przez interesujący nas element HTML powinna zostać obrócona w obszarze zawartości tego elementu HTML.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje o właściwości image-orientation

przeznaczenie

element img, element embed, element object lub element video

pozycja

dowolna

dziedziczenie

tak

wartość initial

0deg

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości image-orientation

Firefox

tak

Google Chrome

nie

Safari

nie

Opera

nie

Internet Explorer

nie

Edge

nie

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

Opis wartości właściwości image-orientation

rozmiar

Opis

Za pomocą właściwości image-orientation oraz dowolnej liczby wraz z wybraną jednostką miary kąta możemy określić rozmiar kąta obrotu treścią reprezentowaną przez interesujący nas element HTML.

Wartości dodatnie

wartości dodatnie obracają w prawo treść reprezentowaną przez element HTML

Wartości ujemne

wartości ujemne obracają w lewo treść reprezentowaną przez element HTML

Sposób podawania

wraz z wybraną jednostką miary kąta należy podać wartość równoznaczną wielokrotności kąta 90 stopni (np. 90deg, 180deg, 270deg itd.) w przeciwnym wypadku przeglądarka internetowa zaokrągli podaną przez nas wartość do najbliższej wartości równoznacznej wielokrotności kąta 90 stopni (np. wartość 44deg zostanie zaokrąglona do wartości 0deg, a wartość 45deg zostanie zaokrąglona do wartości 90deg)

Przykład

  image-orientation:90deg;
orientacja obrazka po dodaniu do elementu img właściwości image-orientation wraz z wartością 90deg

Obrazek "zwierze-01.png" reprezentowany przez przykładowy element "img" został obrócony w prawo o kąt 90 stopni w rozmiarze obszaru zawartości przykładowego elementu "img", ponieważ do wspomnianego elementu "img" została dodana właściwość "image-orientation" wraz z wartością "90deg".

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 {
        image-orientation:90deg;
        width:250px;
        height:400px;
        border:10px dashed black;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>