Pour qu’une image soit automatiquement redimensionnée, pour remplir 100% de la hauteur ou 100% de la largeur, la première des deux contraintes atteintes, tout en conservant un ratio 1:1 et sans javascript, voilà :

HTML :
<div><span></span></div>

CSS :

div span {
background: url(mon_image_ici) no-repeat center center;
background-size: contain;
}


Voilà ce que ça donne quand la largeur est la première atteinte (en bas) et quand la hauteur est la première atteinte (en haut) : http://lehollandaisvolant.net/img/css-background-size.jpg

#balèze

En fait, les deux mots clés possibles sont contain (l’image est toujours contenue dans la boîte) et cover (l’inverse : l’image recouvre toujours l’ensemble de la boîte).

ÉDIT : seul inconvénient, les petites images seront elles aussi agrandies. Fuck.