Bilder zuschneiden

YelloW22

Erfahrenes Mitglied
hallo. ich habe einen DIV der 160x120 pixel groß ist. alle meine Bilder sind größer als diese Maße. Wenn ich sie nun einfüge, werden sie entweder verzerrt oder füllen wegen der skalierung nicht den kompletten DIV.

also wie kann ich mittels CSS nur einen passend großen Auschnitt des jeweiligen Bilds anzeigen? am besten wäre es, wenn dieser Ausschnitt aus der Mitte wäre. hab schon mit dem clip:rect (...); rumprobiert, habs aber nich kapiert wie das geht ...

aufbau ist folgender:
HTML:
<div id='bild'>
<img border='0' alt='bild' width='100%' height='100%' src='xxxxxxx.jpg'>
</div>
 
Zuletzt bearbeitet:
Hey,


du fragst zwar speziell nach CSS.
Aber ich finde es praktischer, wenn du die Bilder via Stapelverarbeitung/Batch skalierst/zerschneidest.

Und anschließend die Thumbnails darstellst.
Dann muss der Benutzer nicht so lange laden und die Serverlast geht herunter.

mfg
bo
 
Nein, er meint, dass ein eigenständiges Programm die Bilder extern skaliert und du nur diese Versionen benutzt.
Dafür brauchst du aber Programme, die Bilder runterskalieren können. Oder man kann es gleich in PHP machen (GD Library).
 
Nein, er meint, dass ein eigenständiges Programm die Bilder extern skaliert und du nur diese Versionen benutzt.

Jepp.
PHP wäre auch möglich, dann muss man aber auf das Verhältnis Höhe/Breite achten.

Ich wollte es nur erwähnen,
dann ersparst du dir die Skalierung via CSS und der Seitenaufbau geht beim Besucher schneller.

mfg
bo
 
Wie clip funktioniert kannst du hier nachlesen: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clip

Ich frag mich allerdings, was die sich bei der Impelementierung gedacht haben :-P Zum einen sind die Maßangaben nicht (wie bei margin, padding etc.) vom jeweiligen Rand aus, sondern immer von oben bzw der linken Seite des Originalausschnitts, zum anderen werden mit css formatierte Ränder mit abgeschnitten :-P Was ein Unsinn.

Falls du keine Ahnung von PHP oder anderen Programmiersprachen hast, wäre es trotzdem die einfachere Lösung für dich.

Viele Grüße,
Frezl
 
Zurück