LINUX.ORG.RU

Выровнять картинки по высоте

 , ,


0

1

https://pp.vk.me/c626518/v626518907/311fa/VajeRsw6bKg.jpg

Подскажите, как сделать, чтоб изображения выстраивались в строку и подгонялись по высоте?

Использовал вот этот код https://codepen.io/dudleystorey/pen/Kgofa

У меня они выстраиваются в столбики одинаковой ширины. В гугле решения не нашел.

При установке фиксированной высоты контейнеру, а картинкам 100% не то, тогда картинки занимают не всю строку и при изменении размера всё разъезжается.

★★

Для контейнера flexbox, для картинок max-height & object-fit/background-size (смотря как у тебя картинки вставлены)

Deleted
()
Последнее исправление: Deleted (всего исправлений: 1)

Вроде как библиотека javascript masonry это дело фиксит. Попробуй.

xtala
()
Ответ на: комментарий от Deleted

попробовал, немного не то, так как на размер окна картинки не реагируют. в tumblr вот как-то реализовано. Насколько я понял, через bootstrap.

el-d ★★
() автор топика
Ответ на: комментарий от el-d

Бутстрап тут не причем, дело в том, что разработчики тумблера думаю не спрашивали на лоре как это сделать, а читали спеки, тут тебе дали пример для размышления, дальше доделай как тебе надо, тем более ты знаешь где сделано так как тебе надо

Deleted
()
Ответ на: комментарий от anonymous

тогда адаптивности не будет

el-d ★★
() автор топика

Библиотеки, флексы, js... Ужас, какие сложные решения! Скажи что ты конкретно реализуешь, а я подскажу тебе наиболее изящное решение.

mr_Heisenberg
()
Ответ на: комментарий от mr_Heisenberg

А что сложного во флексах?

Реализую страницу-галерею для портфолио. Собственно, хотелось бы, чтоб картинки были выровнены по высоте и при этом строка с картинками занимала всю ширину сайта, Как в тумблере или вконтакте

https://pp.vk.me/c626518/v626518907/311fa/VajeRsw6bKg.jpg

el-d ★★
() автор топика
Ответ на: комментарий от el-d

Флексы не так уж и плохи, а вот их поддержка браузерами - оставляет желать лучшего. Задачка интересная. Ближе к ночи скину готовый пример, а то сейчас не у ноутбука.

mr_Heisenberg
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.