Maintenir le ratio d'aspect avec min / max hauteur / largeur?

J'ai une galerie sur mon site où les utilisateurs peuvent télécharger des images.

Je voudrais que les images de s'asseoir dans un div, qui conserve sa hauteur, les images devraient pas être supérieure à 500 px de hauteur. La largeur doit être automatique pour maintenir le ratio d'aspect.

HTML:

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

J'ai essayé ce CSS:

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        max-width: 100%;
    }
}

Ci-dessus fonctionne bien, la galerie est toujours 500px de haut et les images ne jamais dépasser 500 px de hauteur. Je rencontre des problèmes mais avec des images plus petites, si un utilisateur télécharge une petite image, j'aimerais qu'il 'sauter' à un minimum de 200px. Je sais que cela peut être atteint par la création d'un min-height sur l'image, le problème avec ceci est que, si l'image est de moins de 200px de hauteur, mais dire, 2000px de large, l'image saute à 200px de hauteur, mais, le rapport d'aspect est foutu, car l'image est plus large que les images div parent.

Comment puis-je avoir une hauteur min, mais de conserver les proportions?

source d'informationauteur panthro