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 ()

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

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

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

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

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

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

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

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