Изображение Next.js — как сохранить соотношение сторон и при необходимости добавить почтовые ящики ⇐ CSS

[Anonymous]

У меня есть область моего приложения Next.js, которая представляет собой выбранную фотографию из фотогалереи, поэтому ее размер должен оставаться фиксированным, когда люди пролистывают выбранное изображение или загружается фотография. У меня адаптивный макет, но если сильно нажать, я бы сказал, что эта область пикселей составляет 566*425 пикселей.
Я не понимаю, как это сделать на самом деле. Вот самое близкое, что мне удалось получить, но проблема в том, что я получаю переполнение изображения, когда соотношение сторон превышает 566x425, а для изображений с соотношением сторон ниже 566x425 оно растягивается по оси Y. Что мне действительно нужно, так это иметь фиксированный блок, и тогда, если соотношение сторон будет отличаться от максимального размера, вы увидите почтовые ящики либо по бокам, либо сверху и снизу.
style={{
position: 'relative',
width: '566px',
height: '425px',
}}
>




Подробнее здесь: https://stackoverflow.com/questions/668 ... hen-needed