new_prototyper: Bildausschnitt vertikal und horizontal zentrieren

Beitrag lesen

Moin!

Das Bild habe ich mal in einem DIV mit fester Grösse platziert. Jetzt ist natürlich das Problem, dass nur der Ausschnitt aus dem Ecken des Bildes angezeigt wird.

Es ist mir nicht ganz klar, was genau Du da machst. Hat die div die Größe, die
der mittlere Ausschnitt des Bildes haben soll?
Wenn ja, dann hier einige Vorschläge:

  • Bei Background-Image ist das Problem, dass das Bild auch noch skaliert dargestellt werden muss.

Warum das? Wenn das Bild das background-image der div ist, kannst Du es so positionieren, dass eben genau der gewünschte Ausschnitt zu sehen ist - etwa so:

  
#divId {background: url(bild.jpg) no-repeat -xpx -ypx;}  

  • Mit Javascript habe ich keine zuverlässige Lösung gefunden, um die gerenderten Bildgrössen zu erhalten. Also kann ich keine Positionierung des Bildes abhängig von den Bildgrössen machen.

Die Position von HTML-Elementen lässt sich mit JavaScript verändern, wenn entweder das Element inline-style-Angaben zur Position hat (z.B. <div style="position:absolute; left:10px; top:100px;">), oder wenn Du direkt im script den Elementen Positionswerte zuweist. Dann einfach z.B. mit

  
var div = document.getElementById('divId');  
div.style.left = parseInt(div.style.left) -100 + "px";  

die Position ändern. (Besser ist noch - bei einmaliger Positionsänderung - im css 2 Klassen für die beiden Positionen zu haben und mit js die Klasse des Elementes ändern).
Ich weiß nur nicht, wozu Du mit js das Bild positionieren willst(?)

Dann kann man bestimmte Bereiche eines Bildes auch noch mit clip oder mit overflow:hidden "ausschneiden"...

Hm, hoffe, ich habe Dein Problem richtig verstanden und konnte etwas helfen,

lieben Gruß