Bildausschnitt vertikal und horizontal zentrieren

[tssh]

Hallo zusammen!

Ich habe folgendes Problem: Ich möchte einen quadratischen Ausschnitt eines Bildes anzeigen, wobei genau der quadratische Ausschnitt in der Mitte (vertikal und horizontal) des Bildes angezeigt werden soll. Ich brauche das für eine Galerie, wo Thumbnails in kleinen Quadraten dargestellt werden sollen. Natürlich möchte man jetzt bei den Vorschaubildern nicht einen Ausschnitt aus der Ecke sehen, sondern die Mitte des Bildes. Ich hoffe ich habe mich einigermassen verständlich ausgedrückt.

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.

Folgendes habe ich schon probiert:
 - 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.
 - Bei Background-Image ist das Problem, dass das Bild auch noch skaliert dargestellt werden muss.
 - Das Bild mit PHP umzurechnen ist fast nicht möglich, da ich das ganze Bild-Upload-Tool abändern müsste, oder die Bilder jedesmal beim Aufruf neu umrechnen muss, was aus Performance-Gründen nicht in Frage kommt.

Hat jemand eine Idee wie dies zu machen ist?

Bereits jetzt besten Dank für alle Vorschläge!
Liebe Grüsse

[new_prototyper]

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ß

[Matthias Apsel]

Om nah hoo pez nyeetz, tssh!

Eine Galerie wird wohl eine Liste von Bildern sein.

<ul>  
  <li></li>  
  <li></li>  
  ...  
</ul>

Bei Klick auf das Vorschaubild sollte ein Bild angezigt werden.

<ul>  
  <li><a href="bild1.jpg"></a></li>  
  <li><a href="bild2.jpg"></a></li>  
  ...  
</ul>

Die a-Elemente erhalten jetzt das gewünschte Bild als Hintergrund mit background-position: center. Jetzt hast du die Mitte des unskalierten Bildes als Vorschaubild.

Matthias

[Gunnar Bittersmann]

@@tssh:

nuqneH

Ich möchte einen quadratischen Ausschnitt eines Bildes anzeigen, wobei genau der quadratische Ausschnitt in der Mitte (vertikal und horizontal) des Bildes angezeigt werden soll. Ich brauche das für eine Galerie, wo Thumbnails in kleinen Quadraten dargestellt werden sollen.

Du verwendest die großen Bilder für die Vorschau?? Das ist unsinnig, eine riesige Datenmenge zu übertragen, die der Nutzer gar nicht benötigt. Kostet nur sinnlos Ladezeit. Erstelle Thumbnails (kleine Vorschaubilder in der Größe, wie sie angezeigt werden)!

Natürlich möchte man jetzt bei den Vorschaubildern nicht einen Ausschnitt aus der Ecke sehen, sondern die Mitte des Bildes.

Bei Vorschaubildern möchte man einen Auschnitt, der das (große) Bild gut repräsentiert. Das kann die Mitte sein, muss aber nicht.

Wenn man wirklich gute Vorschaubilder haben möchte, kommt man um die manuelle Erstellung kaum drumherum: (quadratischen) Ausschnitt wählen und diesen auf die Zielgröße verkleinenern. Für jedes Bild wird der Ausschnitt in Position und Größe (im Originalbild) anders sein.

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

In modernen Browsern kein Problem.

• Das Bild mit PHP umzurechnen ist fast nicht möglich

Das wäre aber da mindeste, was du tun solltest (siehe oben).

oder die Bilder jedesmal beim Aufruf neu umrechnen muss, was aus Performance-Gründen nicht in Frage kommt.

Denk nicht nur an die Performanz auf deinem Server, sondern auch an die Performanz der Übertragung und Darstellung beim Nutzer!

Vielleicht könntest du auch bei jedem Aufruf nachsehen, ob schon eine Thumbnail-Datei auf dem Server vorhanden ist, und wenn nicht, wird diese einmalig erstellt.

Qapla'