Неправильная настройка высоты изображения для пейзажных и портретных изображений

Question

Я создаю отзывчивую версию существующего сайта агентства недвижимости. Каждое свойство имеет галерею изображений, которые хорошо отображаются, когда изображения являются ландшафтными. Проблема в том, что они портреты.

В исходном коде размеры изображения определяются как:

#gallery-images { 
    height: 577px; 
    overflow: hidden; 
    position: relative; 
    width: 828px; 
} 

Я перезапись это (с запросом СМИ), поэтому он становится

#gallery-images { 
    height: 205px !important; 
    left: 1px; 
    width: 290px; 
    } 

Однако, это означает, что портрет изображения обрезаются сверху и дают менее идеальный дисплей - see here for example.

Если я установил height:auto и overflow:visible, то портретные изображения отображаются нормально, но есть негативные последствия для высоты страницы. По сути, галерея nav остается в положении, но впереди много белого пространства, когда снова отображаются пейзажные изображения.

Один из вариантов состоит в том, чтобы переместить галерею над изображениями и пострадать от пробела внизу, но мне интересно, есть ли другое решение, о котором я не думал. Я ограничен в отношении изменений, отличных от CSS, которые я могу сделать, но, возможно, мог бы убедить клиента что-то добавить, если скрипт обеспечит лучшее решение.

Answer 1

Это зависит от вас, если вы хотите отображать переполнение или нет, но я думаю, что вы ищете объявление min-width ... если вы оставите высоту, то изображение будет масштабироваться пропорционально.