Как в CSS сделать отображение фотографий одним потоком?

Question

[mantovpinets]

Всем доброго времени суток.

Верстаю сайт. На главной странице сайта через api вытаскиваю фотографии из вк и отображаю на странице. Вся фишка в том, что фотографии приходят разного формата и мне бы хотелось разместить их на странице, не подгоняя размеры друг по друга, чтобы они шли одним потоком. Но блочная структура документа не позволяет мне сделать этого, так как высота одного блока может разбить всю разметку и получается дичь. Фишка с flex-ами немного решила эту проблему, когда сделала все блоки одной высоты, высчитывая её по самой большой высоте блока в ряду. И это уже хорошо, но что делать, если фотография, например, имеет портретный формат, а не альбомный? Тогда она тоже выставляет всем в ряду одинаковую высоту, но появляется большие пробелы незаполненного пространства.
Есть ли какой-нибудь приём в css, чтобы сделать блоки одним потоком, чтобы все фотографии шли один за одним, не разбивая разметку своей нестандартной высотой?

Answer 1

[Ankhena]

https://masonry.desandro.com

Comments

[mantovpinets]

Отличный ресурс, спасибо. Буду разбираться!)

Answer 2

[monochromer]

Для сохранения пропорций изображения можно применять object-fit: cover или background-size: cover

Answer 3

[cssfish]

верно вам пишут, cover/contain решает. тут нужно мыслить не картинками, а просто строить структуру блоков, а картинки натягивать фонами.

Comments

[mantovpinets]

А разве высота блока в таком случае будет высчитываться автоматически? мне кажется их нужно будет заранее фиксировано устанавливать. Проще всё-таки img-шным тегом в моём случае.

[cssfish]

так сделайте блок с фиксированным соотношением сторон (вы просто сейчас с помощью Img добиваетесь такого поведения).