HTML Image "Clipping"

[Eric Cartman]

Hallo.
Wie kann ich ein Image in HTML per <IMG> "clippen"? Damit meine ich das "ausschneiden" eines Bereiches im Image ohne es zu skalieren. Beispielsweise hab ich ein Image mit der Aufloesung 1000x500 und moechte nur einen Bereich von 50x50 (aus der Mitte heraus) anzeigen lassen. Ist sowas mit HTML ueberhaupt moeglich?

Gruss
Cartman

[PRIEST]

mit javascript schon

[C++ Forumbot]

Dieser Thread wurde von Moderator/in rüdiger aus dem Forum Rund um die Programmierung in das Forum Webzeugs verschoben.

Im Zweifelsfall bitte auch folgende Hinweise beachten:
C/C++ Forum :: FAQ - Sonstiges :: Wohin mit meiner Frage?

Dieses Posting wurde automatisch erzeugt.

[Ein ehemaliger Benutzer]

Nicht als <img> einbinden, sondern als <div>, dann Höhe und Breite via CSS festlegen und die Graphik als background-image . Den Offset ggf. mit background-position angeben.

[Eric Cartman]

árn[y]ék schrieb:

Nicht als <img> einbinden, sondern als <div>, dann Höhe und Breite via CSS festlegen und die Graphik als background-image . Den Offset ggf. mit background-position angeben.

Koenntest du mal ein kleines Beispiel posten? Waere echt nett

Gruss
Cartman

[Ad aCTa]

Naja, ich lass mich mal breitschlagen:

<div style="background-image: url(deinBild.png);
            background-position: 10px 40px; 
            width: 300px;
            height: 300px;">

Breite/Höhe angeben und dann das Hintergrundbil positionieren, ist einfacher als erst mit JavaScript-Clips anzufangen.

[Borschtsch]

Vielleicht sollte man noch hinzufügen, dass die Image-Datei mit dieser CSS-Methode immer noch vollständig zum Client übertragen wird. Die Ladezeit bleibt also dieselbe.

Gruß

[PRIEST]

oh achso hab mich verlesen dachte er wollte crop haben