Bildausschnitt per CSS
andre
- css
hallo.
ich möchte ein bild (ist zB.: 100x100px) mit 20x50px anzeigen lassen. es soll aber nur der ausschnitt angezeigt werden. das bild soll nicht prozentual verkleinert werden.
geht das nicht mit css? hatte schon gesucht und auch mit overflow rumprobiert aber nichts gefunden....
vielen dank
Hallo,
ich möchte ein bild (ist zB.: 100x100px) mit 20x50px anzeigen lassen. es soll aber nur der ausschnitt angezeigt werden. das bild soll nicht prozentual verkleinert werden.
<img src="..." style="position:absolute; clip:rect(0px,20px,50px,0px)" alt="...">
Hinweis: clip:rect(top,right,bottom,left)
MfG, Thomas
hi.
danke schonmal für die antworten. das wäre schon gut, wenn das "position:absolute" nicht wäre. denn dann sind alle bilder auseinander:
siehe
http://www.roteraupe.de/pages/galerie.pop.php?id=37
noch ne lösung?
Oh sorry, nicht auseinander sondern aufeinander.
Hallo,
Oh sorry, nicht auseinander sondern aufeinander.
Dann gibt top und left explizit an!
MfG, Thomas
Hi Thomas,
nö, ist das selbe Ergebnis.
Grüße
André
nö, ist das selbe Ergebnis.
Dann musst du um jedes Bild ein DIV machen:
<div style="width:100px;height:100px;overflow:hidden;"> BILD </div>
clip ist halt flexibler.
Struppi.
Hi Struppi,
dann werde ich das mal probieren...
Vielen Dank
André
Hi,
Dann gibt top und left explizit an!
Warum überhaupt position:absolute? clip ist nicht nur für positionierte Elemente definiert, sondern für block-level und replaced elements. img-Elemente sind replaced elements.
cu,
Andreas
Hi,
Warum überhaupt position:absolute? clip ist nicht nur für positionierte Elemente definiert, sondern für block-level und replaced elements. img-Elemente sind replaced elements.
Nachtrag: overflow darf natürlich nicht auf visible stehen.
cu,
Andreas
ich möchte ein bild (ist zB.: 100x100px) mit 20x50px anzeigen lassen. es soll aber nur der ausschnitt angezeigt werden. das bild soll nicht prozentual verkleinert werden.
Da hast du aber nicht lange gesucht.
selfhtml -> CSS -> Positionierung und Anzeige von Elementen -> http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clip
Struppi.