@mantovpinets

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

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

Верстаю сайт. На главной странице сайта через api вытаскиваю фотографии из вк и отображаю на странице. Вся фишка в том, что фотографии приходят разного формата и мне бы хотелось разместить их на странице, не подгоняя размеры друг по друга, чтобы они шли одним потоком. Но блочная структура документа не позволяет мне сделать этого, так как высота одного блока может разбить всю разметку и получается дичь. Фишка с flex-ами немного решила эту проблему, когда сделала все блоки одной высоты, высчитывая её по самой большой высоте блока в ряду. И это уже хорошо, но что делать, если фотография, например, имеет портретный формат, а не альбомный? Тогда она тоже выставляет всем в ряду одинаковую высоту, но появляется большие пробелы незаполненного пространства.
Есть ли какой-нибудь приём в css, чтобы сделать блоки одним потоком, чтобы все фотографии шли один за одним, не разбивая разметку своей нестандартной высотой?9bd11f5dffcc44eda5166f2df1bafbdd.jpg
  • Вопрос задан
  • 174 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Пригласить эксперта
Ответы на вопрос 2
monochromer
@monochromer
DIVeloper
Для сохранения пропорций изображения можно применять object-fit: cover или background-size: cover
Ответ написан
Комментировать
@cssfish
Плохое знание основ - причина больших бед
верно вам пишут, cover/contain решает. тут нужно мыслить не картинками, а просто строить структуру блоков, а картинки натягивать фонами.
Ответ написан
Ваш ответ на вопрос

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

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