Динамическая высота на сетке адаптивного изображения?

У меня есть «сетка» изображений с товарами, и я хочу, чтобы они были отзывчивыми. Как вы можете видеть, в «мобильном представлении» изображения хорошо вписываются и выглядят нормально, но на рабочем столе, когда они больше по горизонтали, высота слишком сильно обрезается, поэтому большая часть изображения отсутствует.

Вот как сайт выглядит в размерах для мобильных устройств:

Мобильная версия

И размер рабочего стола:

Просмотр рабочего стола

Есть ли у меня способ увеличить высоту, сохраняя при этом их "заподлицо" и в сетке? Понятия не имею, почему я нахожу это таким сложным!

Сайт находится: здесь


person BT643    schedule 17.02.2014    source источник


Ответы (2)


Тогда проще (и, возможно, единственное) будет продолжать использовать фиксированную высоту, но с медиа-запросами. Это означает, что вы изменяете высоту ссылки в зависимости от ширины вашего экрана. Это имеет смысл, потому что у вас всегда будет 1, 2, 3 или 4 столбца, поэтому довольно легко сделать приблизительную оценку высоты, которую вы хотите для каждого случая.

person stilllife    schedule 18.02.2014
comment
Спасибо за ваш ответ .. Я пробовал это, но мне пришлось добавить МНОГО медиа-запросов, чтобы он выглядел гладко / как я хотел :( - person BT643; 19.02.2014

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

Придется просто бежать с этим!

person BT643    schedule 18.02.2014