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