Stil mit {stil}

Feb 2009

clip – Elemente beschneiden oder freistellen

Die CSS-Eigenschaft clip bestimmt einen Ausschnitt eines HTML-Elements – z.B. eines Bildes, einer Grafik oder eines Layoutoutblocks. So lassen sich z.B. Bilder unabhängig von ihrer tatsächlichen Größe als Ausschnitt in immer derselben Größe anzeigen, ohne dass sie tatsächlich skaliert und beschnitten werden müssen.

<img style="clip: rect(50px 210px 190px 40px); position: absolute;" 
     width="260" height="229" … />

Das Element muss absolut positioniert sein, damit die CSS-Eigenschaft clip wirksam wird.

Das Element nimmt aber weiterhin den Platz ein, den es ohne die Eigenschaft clip benötigt hätte – der abgeschnittene Teil des Elements wird einfach nicht dargestellt. padding und border werden ebenfalls zur Größe des Elements gerechnet und beim Clipping einberechnet.

Während in CSS2 der Abstand noch von den einzelnen Seiten der Box angegeben wurde, interpretieren die Browser den Abstand von der Ecke top/left. Seit CSS2.1 gilt diese Implementierung als korrekt.

Auch die verwandte CSS-Eigenschaft overflow bestimmt, ob ein übergroßes Element geclipt wird.

CSS-Eigenschaft clip

IE4+ M1 N6 Op5 S1.2 CSS2.1 Erblich: Nein

clip

clip beschneidet ein Element und gibt an, welche Teile des Elements sichtbar sein sollen.

Werte

auto | rect (top, right, bottom, left)

Wenn overflow mit visible angegeben wird, hat die Eigenschaft clip keinen Effekt auf das Element und das Element wird vollständig dargestellt, auch wenn es die Grenzen des umfassenden Blocks überschreitet.

auto

ist die Voreinstellung und legt fest, dass der Browser bestimmt, welche Teile des Elements sichtbar sein sollen.

rect(top, right, bottom, left)

legt fest, dass die Form des Elements als Viereck dargestellt werden soll (zurzeit ist rect die einzige Variante – in neuen Versionen von CSS sollen weitere Formen hinzukommen). Die Werte für die Kanten der Vierecke werden durch Leerstellen voneinander getrennt in einer Liste dargestellt. Sie werden im Uhrzeigersinn top, right, bottom und left aufgeführt, wobei jeder Kantenwert angegeben werden muss. Jeder Kantenwert stellt den Abstand zum umfassenden Block dar:

• Der erste Wert – top – legt den Abstand von der oberen Kante des umfassenden Blocks fest.
• Der zweite Wert – right – legt den Abstand von der linken Kante des umfassenden Blocks bis zur rechten Elementkante fest.
• Der dritte Wert – bottom – legt den Abstand von der oberen Kante des umfassenden Blocks bis zur unteren Elementkante fest.
• Der vierte Wert – left – legt den Abstand von der linken Kante des umfassenden Blocks fest.

Der Abstand kann positiv oder negativ sein und kann sich über den umfassenden Block hinaus erstrecken. Damit der Ausschnitt sichtbar ist,

• muss bottom größer sein als top und
• right muss größer als left sein.

Jeder der Werte für top, right, bottom und left kann in einer der folgenden Längenmaße angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

zurück zum Seitenanfang