Картинки разной высоты — адаптировать или выровнять под один размер?

Question

[Underdoggit]

Добрый день уважаемые господа, есть картинки в блоке, они разного размера и прыгают из-за высоты. Подскажите универсальный метод выравнивания их силами css, бутстрапа или флексов, что бы они были все в одну высоту. Или все таки резать их в фотошопе?

Answer 1

[Денис Т]

попробуй пошаманить с max-height и min-height, при этом width: auto

Comments

[Виктор Таран]

не прокатит это дает проблеммы с контентом внутри, если будет длинный элемент, есть шанс уйти за экран,
а если выставить большое значение то будут большие пробелы между другими элементами.
Решение должно учитывать максимальную высоту текущих двух дивов но не трогать следующие, притом быть адаптивным и на ЛГ должны выравнивать 3 или 4 элемента в ряд.
Это решение логично и просто, но де факто дает кучу проблем при адаптиве и очень требовательно ко описанию элемента.

[Денис Т]

если элемент будет слишком длинным можно контейнеру задать overflow: hidden;
а в целом согласен, это не уникальное универсальное решение.
а вы бы как сделали?

Answer 2

[Виктор Таран]

1. Естественно выровнять картинки
2. Есть множество способов но я использую самый простой без использования css и js, все что понадобится это стандартные классы бутстрапа и 2 условия в php вставлять каждый второй и каждый третий элемент див.
Верстка 100% адаптивна и исключает всяческую возможность уплывания контента.
https://www.mydefile.ru/catalog/

Плюс такого метода очевиден
1. отсутствие лишних классов и медиа запросов
2. 100% совместимость с бутстрап
3. отсутствие js и опять же проблем с адаптивом.
4. Простота создания.
5. стабильность решения.
6. Выравнивание высоты затрагивает только ту линию элементов в которой требуется изменить высоту, не затрагивая остальные элементы
из минусов
реализация на php а не в html хотя учитывая количество логики накрученном на каталоге в коде php добавить пустой див каждый 2 или 3 див это мелочи.

Comments

[Underdoggit]

Спасибо, покопаюсь в коде)