Отображение изображения без обрезки, растяжения и т. Д. С максимумом ⇐ CSS

[Anonymous]

У меня есть изображение (ширину/высоту которого я точно не знаю --> загруженное из базы данных), которое должно растягиваться на всю ширину контейнера (см. закругленные углы). Это я решил довольно хорошо. Но особенно портретные изображения иногда становятся слишком большими, поэтому я бы хотел применить максимальную высоту. Как это сделать?
Текущий код без максимальной высоты (в противном случае отлично работает)

Код: Выделить всё

.avatar-box {
position: relative;
overflow: hidden;
border-radius: 10px;
}

.avatar-thumb-square2 {
overflow: hidden;
position: relative;
}

.avatar-thumb-square2 .avatar-image {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}< /code>


[img]https://www.alten.com/wp-content/uploads/2021/05/satellite-donnees-oceanographiques.jpg[/img]

Результат примерно такой:


Но, как видите, изображение слишком велико по вертикали, поэтому Я хотел бы применить максимальную высоту. Как я могу ограничить размер изображения, например, до 400 пикселей? Просто применив максимальную высоту, изображение обрезается. См. образец


Так как же мне показать полное изображение (по центру, если оно не растягивается на 100%) и сохранить закругленные углы? Я могу использовать JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/694 ... max-height