CSS clip - Bildausschnitt anzeigen

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.

Das Ziel ist es, nur einen Teil des Bildes anzuzeigen und den Rest abzuschneiden. So Beispielsweise:

CSS clip Bildausschnitt

CSS clip Bildausschnitt

Beispielcode zu CSS clip


Für dieses Beispiel kannst du dir unser Beispielbild downloaden:

Bild: Blume (Abb. 2)

Bild: Blume (Abb. 2)


Der HTML Teil könnte so aussehen:

HTML Bildausschnitt
<div id="einBild">	<img src="bild-blume.jpg" /></div>


Der CSS Teil:
#einBild{	width: 200px;	height: 150px;	background-color: #BEBEBE;} #einBild img{	position: absolute;	clip: rect(20px 100px 70px 40px);	overflow: hidden;}

Das Ergebnis sieht dann so aus:


Clip Bildausschnitt Ergebnis

Clip Bildausschnitt Ergebnis

Funktionsweise: CSS Clip zum beschneiden von Bildern


Für dieses Tutorial habe ich ein HTML img-Element genutzt, das geht natürlich auch mit Hintergrundbilder per background-image.

Der wichtigste Teil des Tutorials ist die CSS Eigenschaft clip. Diese dient dafür, nur einen Bildausschnitt anzuzeigen. Die Angabe rect steht für rectangle, also Rechteck-Bildausschnitt.
Die 4 Angaben bestimmen Startposition der linken oberen Ecke, sowie die darauffolgende height und width.

1. Clip-Angabe: von oben bis Ausschnitt Beginn (1) - top
2. Clip-Angabe: von links bis Ausschnitt Ende (2) - right
3. Clip-Angabe: von oben bis Ausschnitt Ende (3) - bottom
4. Clip-Angabe: von links bis Ausschnitt Beginn (4) - left

Zur besseren Übersicht, alle Einzelwerte farbig wie in obiger Liste.

Zur besseren Übersicht, alle Einzelwerte farbig wie in obiger Liste.

Der komplette Code zum CSS Clip-Tutorial


kannst du gern für eigene Zwecke nutzen. Bitte beachte, dass du auch das Beispielbild bild-blume.jpg (Abb. 2) downloadest.

<html><head><title>Bildausschnitt anzeigen mit CSS - by Webmaster-Glossar.de</title></head><body><style style="text/css">#einBild{	width: 200px;	height: 150px;	background-color: #BEBEBE;}#einBild img{	position: absolute;	clip: rect(20px 100px 70px 40px);	overflow: hidden;}</style><p>Originalbild:</p><img src="bild-blume.jpg" /><br /><br /><p>Bildausschnitt:</p><div id="einBild">	<img src="bild-blume.jpg" /></div><br /><br /><p><a href="http://webmaster-glossar.de">Tutorial by Webmaster-Glossar.de</a></p></body></html>


Ich würde mich freuen, wenn du dieses Tutorial weiter teilst oder auch auf deiner Webseite verlinkst!
Falls Fragen oder Verbesserungsvorschläge auftauchen, hinterlasse ein Kommentar!