Centrage dans un div

Bonjour à tous,
Je voudrait placer dans un div carré de 80x80 une image qui ne l'est pas.
Il s'agit d'images de profil sur un site communautaire où les utilisateurs uploadent leur photo.
Les images seront resizées omothetiquement par un javascript et auront soit une taille de 80x?? ou de ??x80.
Mon problème est le suivant : comment centrer les images dans le div comme dans l'exemple en image ci-dessous ?


le vertical-align ne fonctionne pas... bien évidemment
le meilleur exemple est Facebook qui sur le profil affiche l'image dans son format d'origine et qui sur le mur l'affiche centrée dans un carré. C'est ce que je cherche à obtenir.

merci pour votre aide

Le faire en CSS me semble un peu bancal, je te conseillerai plutôt d'utiliser la libraire GD pour PHP.
Tu as des class qui se balade sur Internet, du genre de celle-ci : http://phpthumb.gxdlabs.com/
Il te faudra bien-sûr géré un système de cache de base pour vérifier si la miniature a déjà été générée, et si oui, la récupérer dans un dossier.

Sinon, tu peux toujours faire un truc du genre en CSS, mais c'est de l'ordre du bidouillage infâme donc peu envisageable pour un site digne de se nom. Évites d'ailleurs d'utiliser javascript pour retailler tes images, en terme d'accessibilité, c'est ce qu'il y a de pire, enfin passons au CSS :

div.avatar {
width: 90px;
height: 90px;
border: 2px solid #FFF;
}

<div class="avatar" style="background: #E5E5E5 url(avatar/mon_avatar.jpg) left center no-repeat;"></div>

C'est moche mais ça marche.

J'insiste sur le fait qu'il est recommandé voir indispensable d'utiliser une class de thumbnailing avec un système de cache. Le CSS et le Javascript n'est pas la solution à tous les problèmes.
Modifié par Guillem.C (17 Apr 2010 - 12:38)