У меня есть галерея на моем сайте, где пользователи могут загружать изображения.

Я хотел бы, чтобы изображения находились в div, который поддерживает их высоту, изображения должны быть не больше 500 пикселей в высоту. Ширина должна быть автоматической, чтобы поддерживать пропорции.

HTML:

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

Я пробовал этот CSS:

#gallery{
    height: 500px;

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

Вышеуказанное работает хорошо, галерея всегда имеет высоту 500px, а изображения никогда не превышают 500px в высоту. Я сталкиваюсь с проблемами, хотя с небольшими изображениями, если пользователь загружает действительно маленькое изображение, я бы хотел, чтобы оно «взорвалось» до минимума 200 пикселей. Я знаю, что это может быть достигнуто путем установкиmin-height на изображении проблема заключается в том, что если изображение имеет высоту менее 200 пикселей, но, скажем, ширину 2000 пикселей, изображение увеличивается до 200 пикселей, но затем соотношение сторон ввинчивается, так как изображение шире, чем изображение. изображения родительского дел.

Как я могу иметь минимальную высоту, но сохранить соотношение сторон?