Ein übergroßes Bild in einem DIV zentrieren?!

[cocoon]

Ich möchte ein Bild mittels CSS beschneiden, so dass es als quadratische Kachel angezeigt wird, statt in 10x15 (oder welchem Ausmaß auch immer). Das mache ich mit dem folgenden Code:

<div class="clipping">
   <a href="picLink">
      <img src="picThumb" />
   </a>
</div>

.clipping {
position: relative;
top: 5px;
left: 5px;
width: 85px;
height: 85px;
clip: rect(0px, 85px, 85px, 0px);
overflow: hidden; 
}

.clipping img {
border: 0;
}

In dieser Form wird vom Bild immer nach unten und rechts abgeschnitten, da es mit der oberen linken Ecke im DIV positioniert wird. Ich möchte aber, dass vom Bildmittelpunkt aus in alle Bildrichtungen gleichmäßig abgeschnitten wird, das Bild müsste also zentriert im DIV positioniert werden. Leider bewirkt aber vertical-align:middle; und text-align:center; nichts.

Hat jemand eine Idee?

 

[Maik]

Hi,

du hast die Möglichkeit, den gewünschten Ausschnitt der Grafik zu definieren:

Der erste der vier Werte bezeichnet den Wert für "oben", gemessen an der oberen Elementgrenze
Der zweite der vier Werte bezeichnet den Wert für "rechts", gemessen an der linken Elementgrenze
Der dritte der vier Werte bezeichnet den Wert für "unten", gemessen an der oberen Elementgrenze
Der vierte der vier Werte bezeichnet den Wert für "links", gemessen an der linken Elementgrenze

In deiner Definition beginnt er eben oben links.

Ansonsten wäre auch anstelle des Grafikelements ein horizontal und vertikal zentriert positioniertes Hintergrundbild eine Alternative.

mfg Maik

 

[Napofis]

Tu den Div raus nehmen und mach aus dem A das Fenster
und binde die Grafik als BG ein

zB

   <a href="picLink" style="background-image: url('picThumb')">&nbsp;</a>

.picLink {
display: block;
position: relative;
top: 5px;
left: 5px;
width: 85px;
height: 85px;
background: 50% 50% no-repeat;
}

Habs nicht getestet sollte aber Funktionieren

 

[cocoon]

Hi,
du hast die Möglichkeit, den gewünschten Ausschnitt der Grafik zu definieren:

Da ich nicht weiß, welche Größe die Bilder haben - das eine ist vielleicht gerade 100x100 groß, ein anderes vielleicht 150x300 - muss ich oben links anfangen, damit auf jeden Fall alle 85x85 ausgefüllt werden.

Tu den Div raus nehmen und mach aus dem A das Fenster
und binde die Grafik als BG ein

Das wollte ich erst machen. Problem: Das Wordpress-Plugin, das ich für die Autoren-Bilder verwende, liefert mir eben keine Bild-URL, sondern einfertiges IMG-Tag.

 

[Maik]

Dann müsstest du die Grafikdimension ermitteln, entweder per JS (Wie kann ich herausfinden, wie Breit bzw Hoch ein Bild ist?) oder PHP ([phpf]getimagesize[/phpf]).

mfg Maik

 

[Napofis]

Das wollte ich erst machen. Problem: Das Wordpress-Plugin, das ich für die Autoren-Bilder verwende, liefert mir eben keine Bild-URL, sondern einfertiges IMG-Tag.

Dann stell doch das Plugin so ein das es dir die Bilder auf 85 x 85 px beim upload zuschneidet?