Отображение изображения без обрезки, растяжения и т. д. с максимальной высотой. ⇐ Html

[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