Mit der CSS Eigenschaft clip ist es möglich, nur einen Teil eines Bildes darzustellen. Sozusagen einen Bildausschnitt zu ermöglichen.
Dafür gibt es verschiedene Möglichkeiten. Eine wird in diesem CSS Tutorial gezeigt.
Beispielcode zu CSS clip
CSS
#einBild{ width:200px; height:150px; background-color:#BEBEBE; } #einBild img{ position:absolute; clip:rect(20px 150px 100px 20px); overflow:hidden; }
HTML
<div id="einBild"> <img src="schwan.jpg" /> </div>
Beispielcode hier ansehen: CSS clip Beispiel
Erläuterung zum clip-Code
Wir haben ein DIV, welches eine feste Höhe und Breite zugewiesen bekommen hat. Darin liegt ein IMG (Image), welches ersteinmal absolut positioniert wurde.
Nun kommt unsere clip-Eigenschaft dazu, welche wir 4 Werte übergeben haben. Das sind die 4 Koordinaten, um ein Rechteck an seinen Platz zu weisen.

CSS Clip: Bildausschnitt Wertübergabe
Informationen und Werte
Vererbbar: Nein
Anwendbar: auf positionierte Elemente
Initialwert: auto (automatisch)
Werte:rect() zur Erstellung eines Rechteckes mit 4 Werten
- 1. Wert: bestimmt die linke Ecke von oben
- 2. Wert: bestimmt die rechte Ecke von links
- 3. Wert: bestimmt die rechte Ecke von oben
- 4. Wert: bestimmt die linke Ecke von links
Marcus alias Speedy86 ist Administrator dieser Webseite und veröffentlicht unter andem News und interessante Artikel rund um WordPress, Suchmaschinenoptimierung, Programmierung und Webdesign. Im Webmaster-Glossar.de gibt es viel wissenswerten Stoff für Webmaster, Webworker bzw. Selbständige im Internet.Artikel:
Bereits 439 Artikel verfasst!