Shlop
@Shlop
Программист

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

Здравствуйте, подскажите пожалуйста, я сверстал сетку (галерею) изображений разного размера, вот тут результат - https://project.dev-my.ru в разделе "Подбор фотографии по тегу". Но столкнулся с некоторыми проблемами:
При уменьшении ширины окна, у меня одна картинка по высоте больше чем соседняя, на скриншоте указал, но я так понимаю что причина в том, что размеры этих двух картинок разные, тогда получается мне нужно что бы эти две картинки были одинакового размера ?
5fe354b72fa7a005520245.png
И ещё одна проблема, к примеру вот эта картинка сильно уменьшается на ширине 320px
5fe356279c601867692812.png
Вопрос в том что вообще верны ли у меня подход к этому и может как то по другому лучше сделать это.
Я рассматривал такие вот ещё варианты:
  1. Использовать вот эту библиотеку Masonry, но хотелось бы конечно на CSS всё это сделать
  2. Использовать display grid, но в IE11 всё ломается
  3. Использовать display flex, ну это вот собственно что я сейчас и сделал


Заранее благодарю за ответ
  • Вопрос задан
  • 107 просмотров
Решения вопроса 1
Shlop
@Shlop Автор вопроса
Программист
В общем кажется решил свою проблему, сделал эти две картинки у которых разная высота была когда они рядом стояли друг с другом, одинакового размера, сейчас они - 416x620, в итоге получилось вот что:
5fe469020a074668817950.png
И для картинок сделал min-height: 111px; минимальную высоту задал, что бы картинки при уменьшении не становились меньше заданной высоты, правда из за этого свойства пропорции не будут сохраняться но у меня пока что с этим проблем нет
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
bestowhope
@bestowhope
Печатает...
Заливка с учетом содержимого в масштабе вышла из чата
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы