Как сделать адаптивную галерею картинок?

Question

[reaget]

Здравствуйте!
Как можно сделать адаптивную галерею-сетку картинок. Вот пример https://jsfiddle.net/5uLcoz9c/
С такой поправкой: чтобы в каждой строке было по 4 картинки.

Заранее спасибо :)

Comments

[Ярослав Иванов]

Переверстать без флексов.

[reaget]

Ярослав Иванов, А как именно это сделать? Нужно чтобы сетка ровная получалась, то есть по высоте картинки совпадают и в каждой строке их по 4.

Answer 1

[Exploding]

Так как-то?

Comments

[reaget]

А как можно сделать так, чтобы при этом по высоте картинки совпадали?

[Exploding]

reaget, устанавливать их как фон для "а", и ставить cover. Будет красота:)

Answer 2

[j n]

Как вариант, но всё зависит от ситуации

Comments

[reaget]

А как можно сделать так, чтобы при этом по высоте картинки совпадали?

[j n]

reaget, задай фиксированную высоту img

[Exploding]

kayart, тогда пропорции "поплывут". На БГ ее!)) И cover-ом прибить намертво!)))

[j n]

Exploding, тоже вариант, но не совсем семантично. Какая-нибудь Опера Мини или похожий браузер с собственным парсером может попросту пройти мимо такого изображения. Важные контентные изображения рекомендуется всё же прописывать через тег . Плюс уже есть неплохая браузерная поддержка свойства object-fit, которая позволяет проделывать с изображениями практически то же, что и с бэкграундными картинками.

[Exploding]

Артём Кайдаш, Если уж в такой ситуации гнаться за семантикой, то я просто не представляю насколько идеальной она должна быть во всем остальном в рамках данной страницы:)
Как показывает практика - все печально: на странице нет h1, или наоборот их несколько, не заполнены или дублируются важные метатеги, но блин картинки мы вот почему-то обязательно должны сделать семантичными:)
Это не камень в ваш город, это я имею ввиду в общем если смотреть на ситуацию глобально:)

[j n]

Exploding, согласен, но это ведь не повод превращать разметку в кашу из тегов ;)

[Exploding]

Артём Кайдаш, Почему в "кашу"?