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.
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ę. Współczesne przeglądarki obsługują równorzędnie oba separatory.
Aby polecenie było interpretowane, element musi zostać poddany pozycjonowaniu absolutnemu (wystarczy podać: position: absolute).
Przykład {clip}
position: absolute; clip: rect(5px, 50px, 40px, 10px):
position: absolute; clip: rect(5px 50px 40px 10px):
position: absolute; clip: rect(5px, auto, 40px, 10px):
Dla porównania bez wycinania:
Pytania i odpowiedzi {clip}
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.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
clip: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 7 2003-01-28 | 1 2003-06-23 |
clip: auto | ≤80 2020-02-04 | ≤72 2020-01-07 | ≤80 2020-02-07 | ≤67 2020-03-03 | ≤13.1 2020-03-24 |