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



## cocoon (12. Juni 2009)

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 (12. Juni 2009)

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 (12. Juni 2009)

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 (12. Juni 2009)

Maik hat gesagt.:


> 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.



Napofis hat gesagt.:


> 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 (12. Juni 2009)

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 (12. Juni 2009)

cocoon hat gesagt.:


> 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?


----------

