Ich habe eine Galerie auf meiner Website, in die Benutzer Bilder hochladen können.

Ich möchte, dass die Bilder in einem Div gespeichert werden, der seine Höhe beibehält. Die Bilder sollten nicht größer als 500px sein. Die Breite sollte automatisch sein, um das Seitenverhältnis beizubehalten.

HTML:

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

Ich habe dieses CSS ausprobiert:

#gallery{
    height: 500px;

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

Das oben Genannte funktioniert gut, die Galerie ist immer 500px hoch und die Bilder haben niemals eine Höhe von mehr als 500px. Ich habe jedoch Probleme mit kleineren Bildern. Wenn ein Benutzer ein wirklich kleines Bild hochlädt, möchte ich, dass es auf mindestens 200 Pixel vergrößert wird. Ich weiß, dass dies durch Setzen eines @ erreicht werden kanmin-height auf dem Bild ist das Problem, wenn das Bild weniger als 200px hoch ist, aber beispielsweise 2000px breit, wird das Bild auf 200px hoch geblasen, aber dann wird das Seitenverhältnis verschraubt, da das Bild breiter als ist die Bilder Eltern div.

Wie kann ich eine minimale Höhe haben, aber das Seitenverhältnis beibehalten?