Przejdź do treści

Pozycjonowanie - CSS

Obcinanie {clip}

W jaki sposób automatycznie przyciąć do określonych rozmiarów obrazek (grafikę, zdjęcie) lub inny element strony (kadrowanie)?

selektor { position: absolute; clip: rect(góra, prawo, dół, lewo) }

Według CSS 2 polecenie można zastosować do elementów blokowych i zastępowanych. Natomiast w CSS 2.1 ma ono zastosowanie tylko do elementów pozycjonowanych absolutnie. Przeglądarki stosują się do wytycznych z CSS 2.1.

Wyrażenia: "góra, prawo, dół, lewo" oznaczają wartości współrzędnych wyciętego prostokąta, określane względem lewego-górnego narożnika elementu, tzn. są to pozycje odpowiednio: górnego-prawego oraz dolnego-lewego wierzchołka wyciętego prostokąta. Wartości te należy podawać za pomocą jednostek długości. Za każdą z nich można wpisać również auto, co oznacza pominięcie cięcia z wybranej strony.
Zamiast całego wyrażenia rect(góra, prawo, dół, lewo) można również podać auto - wartość automatyczna.

UWAGA! Powyższy opis ustalania krawędzi cięcia pochodzi ze specyfikacji CSS 2.1. We wcześniejszej wersji - CSS 2 - wartości "góra, prawo, dół, lewo" oznaczały odległości cięcia od odpowiednich krawędzi elementu, a nie współrzędne wyciętego prostokąta! Przeglądarki interpretują podane parametry zgodnie z nową wersją specyfikacji - CSS 2.1.

Polecenie pozwala wyciąć z elementu pewien jego fragment (o kształcie prostokąta), a następnie wyświetlić go na ekranie.

Specyfikacja CSS 2 wprowadziła dość poważne zamieszanie, jeżeli chodzi o składnię tego polecenia. Nie dość, że sposób ustalania krawędzi prostokąta cięcia został zupełnie zmieniony w CSS 2.1, ponieważ żadna przeglądarka - prawdopodobnie ze względu na trudności w implementacji - nie interpretowała wcześniejszej propozycji, to jeszcze na dodatek CSS 2 niejednoznacznie określiła, jakimi separatorami powinny być rozdzielone wartości w nawiasie rect(...). CSS 2.1 mówi wyraźnie: każda przeglądarka musi obsługiwać jako separator znak przecinka, ale dodatkowo może przyjmować samą spację. Całe to zamieszanie sprawiło, że MSIE 6.0-7.0 interpretuje wymienione separatory dokładnie na odwrót: spacja działa zawsze, a przecinek tylko w trybie wstecznej zgodności. Firefox i Opera obsługują równorzędnie oba separatory.

Aby polecenie było interpretowane, element musi zostać poddany pozycjonowaniu absolutnemu (wystarczy podać: position: absolute).

MSIE 6.0-7.0 obsługuje to polecenie:
  • w trybie Quirks - zawsze,
  • w trybie zgodności ze standardami - tylko jeżeli wartości w nawiasie rect(...) nie zostały rozdzielone przecinkami.

Przykład {clip}

position: absolute; clip: rect(5px, 50px, 40px, 10px):

position: absolute; clip: rect(5px, 50px, 40px, 10px); width: 100px; height: 75px




position: absolute; clip: rect(5px 50px 40px 10px):

position: absolute; clip: rect(5px 50px 40px 10px); width: 100px; height: 75px




position: absolute; clip: rect(5px, auto, 40px, 10px):

position: absolute; clip: rect(5px, auto, 40px, 10px); width: 100px; height: 75px




Dla porównania bez wycinania:

Zwykły obrazek

Pytania i odpowiedzi

Jak przyciąć zdjęcie w CSS?

W CSS, aby przyciąć zdjęcie, można użyć właściwości clip. Przykładowo, "clip: rect(0, 100px, 100px, 0)" określa obszar do przycięcia, gdzie wartości to kolejno: górny, prawy, dolny i lewy margines przycinania.

Jak wyciąć fragment obrazu w CSS?

Aby wyciąć fragment obrazu w CSS, używa się właściwości clip. Na przykład, jeśli mamy obraz o wymiarach 200 pikseli na 200 pikseli, i chcemy wyciąć jego górny lewy kwadratowy fragment o wymiarach 50 pikseli na 50 pikseli, możemy to zrobić następująco: "clip: rect(0, 50px, 50px, 0)". Ta deklaracja clip określa obszar, który ma być widoczny, a wartości to kolejno: górny margines, prawy margines, dolny margines i lewy margines. W tym przypadku, przycinamy górny lewy fragment o wymiarach 50px na 50px.

Komentarze

Zobacz więcej komentarzy

Facebook