Bildausschnitt zentrieren

[misterunknown]

Moin,

ich möchte ein Grid mit kleinen "Vorschaubildern" erzeugen. Diesen Vorschaubilder sollen ein quadratisches Format haben, wobei die _kürzere_ Seite auf 100% gesetzt wird, damit das Bild den Div komplett ausfüllt.

<div id="grid">  
   <div>  
      <img class="wide" src="..." alt="">  
   </div>  
   <div>  
      <img class="tall" src="..." alt="">  
   </div>  
</div>

#grid div {  
   width: 10em;  
   height: 10em;  
   overflow: hidden;  
   display: inline-block;  
}  
#grid div img.wide {  
   height:100%;  
   width: auto;  
}  
#grid div img.tall {  
   width: 100%;  
   height: auto;  
}

Das funktioniert. Nun möchte ich aber diesen Ausschnitt auf der _längeren_ Seite zentrieren. Wie kann ich das am einfachsten bewerkstelligen?

(Ich hoffe ich konnte das Problem verständlich schildern)

Grüße Marco

[misterunknown]

Moin,

(Ich hoffe ich konnte das Problem verständlich schildern)

Beispiel-Seite: Ich will beide Ohren vom Koala sehen, dafür ist mir der Ast egal, an dem er sich festhält. Ich hoffe man sieht, was gemeint ist.

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

ich möchte ein Grid mit kleinen "Vorschaubildern" erzeugen. Diesen Vorschaubilder sollen ein quadratisches Format haben, wobei die _kürzere_ Seite auf 100% gesetzt wird, damit das Bild den Div komplett ausfüllt.

Wenn es anklickbare Vorschaubilder sein sollen, bieten sich a-Elemente mit der Grafik als Hintergrund an. Dann steht dir background-size zur Verfügung.

Matthias

[misterunknown]

Moin,

Wenn es anklickbare Vorschaubilder sein sollen, bieten sich a-Elemente mit der Grafik als Hintergrund an. Dann steht dir background-size zur Verfügung.

Danke dir, daran hatte ich nicht gedacht, funktioniert super ;)

Grüße Marco