Как лучше сверстать галерею изображений разного размера?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста, я сверстал сетку (галерею) изображений разного размера, вот тут результат - https://project.dev-my.ru в разделе "Подбор фотографии по тегу". Но столкнулся с некоторыми проблемами:
При уменьшении ширины окна, у меня одна картинка по высоте больше чем соседняя, на скриншоте указал, но я так понимаю что причина в том, что размеры этих двух картинок разные, тогда получается мне нужно что бы эти две картинки были одинакового размера ?

И ещё одна проблема, к примеру вот эта картинка сильно уменьшается на ширине 320px

Вопрос в том что вообще верны ли у меня подход к этому и может как то по другому лучше сделать это.
Я рассматривал такие вот ещё варианты:

1. Использовать вот эту библиотеку Masonry, но хотелось бы конечно на CSS всё это сделать
   
2. Использовать display grid, но в IE11 всё ломается
   
3. Использовать display flex, ну это вот собственно что я сейчас и сделал

Заранее благодарю за ответ

Comments

[Анатолий Выскуб]

А если например в CSS при адаптации указать одинаковые ширины для картинок max-width: ...px;. Пробовали?

[Froggyweb]

ну есть grid, есть свойство для media объектов object-fit

но в IE11 всё ломается

это нормально. если не стоит поддержки.
и ие11 таки поддерживает гриды, но с оговорками

[Сергей Хлопов]

Анатолий Выскуб, Благодарю за комментарий, да пробовал сейчас, но похоже не подходит

[Сергей Хлопов]

Froggyweb, Благодарю за комментарий, буду иметь ввиду

Answer 1

[Сергей Хлопов]

В общем кажется решил свою проблему, сделал эти две картинки у которых разная высота была когда они рядом стояли друг с другом, одинакового размера, сейчас они - 416x620, в итоге получилось вот что:

И для картинок сделал min-height: 111px; минимальную высоту задал, что бы картинки при уменьшении не становились меньше заданной высоты, правда из за этого свойства пропорции не будут сохраняться но у меня пока что с этим проблем нет