Max-width ou max-height d'une image selon sa forme ?

Bonsoir !

Je cherche à afficher des images sur une page HTML qui ne contient que ca (un genre de galerie), dont la taille s'adapte automatiquement en fonction de la taille de la fenêtre du visiteur, sans toutefois dépasser la taille d'origine de l'image.

Jusque là, c'est très simple :
http://www.alsacreations.com/xmedia/tuto/exemples/css2/demos/min-max/index.html

Là ou les choses se corsent, c'est que j'ai parfois des images dont la largeur est plus grande que la hauteur ou vice-versa.

Si je fais, ceci :

img {max-width: 100%; height: auto;}

et que la hauteur de l'image dépasse la hauteur de la fenêtre, je me retrouve avec un beau scroll vertical pour afficher l'image. Ce qui n'est pas le résultat attendu.

Dois-je passer par une détection de taille de fenêtre et d'images à coup de JQuery, ou bien il y a t'il une solution propre en CSS ?

D'avance un tout grand merci !
Modifié par Bouchon (28 Apr 2011 - 20:15)

Salut,

Bouchon a écrit :
Dois-je passer par une détection de taille de fenêtre et d'images à coup de JQuery, ou bien il y a t'il une solution propre en CSS ?

À mon avis, jQuery a de fortes chances d'être ton meilleur ami afin d'appliquer les déclarations CSS adéquates.