Über mich

Startseite arrow Tipps & Tricks arrow Bilder mit CSS beschneiden

Bilder mit CSS beschneiden
Donnerstag, 21. Februar 2008
Geschrieben von Armin Vieweg
Die Maße eines Bild in einer Website können mit CSS verändert werden. Was aber, wenn man nur einen Ausschnitt von dem Bild anzeigen möchte, ohne das Bild mit einer Bildbearbeitungssoftware öffnen zu müssen?

Genau diese Frage habe ich mir neulich gestellt und ich bin dabei auf eine CSS-Funktion gestoßen, die auf den Namen clip hört.

Theoretisch ist diese Funktion nicht schlecht. Man gibt einen Bereich in Pixel an, der dargestellt wird. Alles andere in dem Element, was sich nicht in diesem Bereich befindet wird nicht dargestellt.

Klingt erstmal genau nach dem, was wir brauchen um ein Bild zu beschneiden.
Im Stylesheet sieht das ganze so aus:

img {
  position:absolute;
  clip:rect(auto auto 130px auto);
}


Diese Lösung hat zwei Probleme die sie recht impraktikabel machen. Zum einen muss das Bild eine absolute Position besitzen damit der Effekt funktioniert, zum anderen ist die Zuweisung der Pixelwerte etwas verworren.

Die Syntax ist die Gleiche, wie man es von CSS kennt. Der erste Wert steht für oben und dann im Uhrzeigersinn weiter. In dem Beispiel wird der 2. und 3. Wert anders gehandhabt und zwar beschreiben diese 130 Pixel in dem Beispiel nicht den Abstand zwischen Ausschnitt und Bildunterkante sondern den Abstand zwischen Oben und Ausschnittuntergrenze.

Möchte ich zum Beispiel bei dem Bild 50 Pixel unten wegnehmen, muss der Wert heißen: Höhe des Bildes - 50 Pixel.
Ihr merkt schon diese Lösung ist nicht das Optimum.


Mit einem DIV geht es einfacher

<div class="bild">
   <img src="bild.jpg" alt="Bild">
</div>


Die Klasse bekommt dann folgende Eigenschaften:

div.bild {
   width:100px;
   height:100px;
   overflow:hidden;
}



Ist das Bild innerhalb des DIV höher oder breiter als 100 Pixel wird alles das, was darüberhinaus geht, ausgeblendet.

Möchte man nun links und oben das Bild beschneiden fügt man Folgendes noch hinzu:

div.bild img {
   margin-top:-20px;
   margin-left:-20px;
}



So wird das Bild oben und Links um je 20 Pixel beschnitten.

Diese Lösung ist auch nicht so 100% optimal, aber sicher einfacher als die von CSS mitgelieferte Variante. Am Besten ist natürlich das Bild von vornherein in Photoshop (oder anderen Programmen) zu beschneiden. Manchmal ist dies aber nicht möglich, z.B. wenn ein Bild von einem externen Service eingebunden werden soll, wie zum Beispiel Thumbalizr.




  Kommentare (8)
 1 Geschrieben von: Jürgen, am 08.03.2009 um 20:12
Super Tipp - hat mir sehr geholfen. 
 
Hatte mich davor mit der clip Eigenschaft rumgeärgert - aber die war dank des position:absolute nun wirklich nicht brauchbar. 
 
Danke!
 2 Geschrieben von: Anne, am 07.01.2010 um 10:35
Hat mir auch sehr geholfen, Danke!  
Bin einfach nicht auf overflow:hidden; gekommen...
 3 Geschrieben von: Jan, am 02.03.2010 um 21:37
danke dir!
 4 Geschrieben von: Wolfgang 85551, am 24.08.2010 um 12:01
Wissen vermehrt sich durch Teilung. Herzlichen Dank !!! Zugegebenermaßen habe ich mich gar nicht erst bemüht sondern gleich auf Google gesetzt. Erste Fundstelle auf diese Seite, Aufgabe in 2 Minuten gelöst, sagenhaft...!
 5 Geschrieben von: Mister, am 01.11.2010 um 16:26
Super. Aber wie schon gesagt: die erste ist nich brauchbar. Overflow ist besser. 
Viel Spaß noch so. 
 
Mister
 6 Geschrieben von: Crepax, am 06.05.2011 um 09:27
Vielen Dank :D 
 
hat mir sehr geholfen und viel arbeit erspart!
 7 Geschrieben von: moprivat, am 22.09.2011 um 09:32
Du kannst auch für das Bild eine Art negativen Zoom nutzen, den man einfach durch das Hinzufügen einer festen Größe z. B. der Höhe realisiert und die Breite auf Auto stellt. Dieses eignet sich gut, um mit dem Originalbild Thumbs herzustellen. In diesem Fall ist dann die Höhe 100px, da sie im Div bereits vordefiniert wurde. Durch den overflow wird alles darüber hinaus abgeschnitten: 
 
div.bild img { 
width: auto; 
height: 100px; 
} 
 
Bei großen Bildern sollte man jedoch aufgrund der Ladezeiten daon absehen oder nur PNG oder GIF verwenden.
 8 Geschrieben von: Zasa, am 26.02.2012 um 15:35
Hallo, 
 
danke für die super Lösung mit den Containern. Jedoch kann ich nun nicht mehr per Javascript die Bildposition ändern. Woran könnte das liegen?
Letzte Aktualisierung ( Dienstag, 1. April 2008 )
 
< Zurück   Weiter >



Tipps & Tricks Kategorien

Beliebteste Tipps