Представьте посты ВКонтакте. Независимо от количества и размеров картинок, они распределяться по div ровно.
Как правильно это сделать и вообще, как это реализована в самом ВК?
Возможно ли это сделать только в CSS или как то нужно пошаманить в JS?
В общем жду Ваших мыслей и возможно кодов:)
-
не представляю посты вконтакте, прикрепи скриншот что-ли, не все люди сидят вконтакте – EatMyDust 20 июн '16 в 7:29
-
Добавил скрин:) – Альберт Ушаков 20 июн '16 в 7:47
-
Нашел некий пример, почти то что нужно, но там выравнивается по ширине, а вот по высоте чет не то. tympanus.net/Development/GammaGallery – Альберт Ушаков 20 июн '16 в 9:08
добавить комментарий
|
2 ответа
и вообще, как это реализована в самом ВК?
Когда смотрел, как это реализовано в ВК, пришел к следующему:
- У ВК есть стандартные размещения для 1, 2, ..., N прикреплений к записи. Т.е. если прикрепили 2 фотки, то запись отображается с одним стилем дивов, если 5 фоток, то они отображаются с другим стилем - с красивом размещением для 5 фоток, и т.д.
- Сами дивы установлены определенного размера, а картинки ставятся на background-image. Фотка там центрируется и лишнее фотки (из-за разных соотношений) просто не показывается.
Такое построение блоков считаю оптимальным, со скриптами такое будет хуже выглядеть. Стили фоток можете посмотреть на самом ВК.
-
В коде ВК лишь img завернутый в тег <a>. Это и так ясно, что используется алгоритм с определенными стилями. Но я думаю, что фишка в размерах картинок и js. То есть как то нужно определить размер картинки и если она в рамках той или иной конфиги, то выводить в определенном стиле. Но как все это связывать между всеми картинками, это сколько возможных вариантов О_о – Альберт Ушаков 20 июн '16 в 8:18
div {
display: inline-block;
padding: .25em;
background-clip: content-box;
background-size: cover;
width: 50%;
box-sizing: border-box;
}
div + div + div {
width: 33.333%;
}
div:before {
content: "";
display: block;
padding-top: 67%;
}
<div style=background-image:url(//placekitten.com/300/300)>
</div><div style=background-image:url(//placekitten.com/300/300)>
</div><div style=background-image:url(//placekitten.com/300/300)>
</div><div style=background-image:url(//placekitten.com/300/300)>
</div><div style=background-image:url(//placekitten.com/300/300)>
</div>
-
Не то, нужен JS который автоматически будет подгонять картинки в блоке, в зависимости от размеров и количества самих картинок. – Альберт Ушаков 20 июн '16 в 8:57
-
@Альберт, на приведённых скриншотах подгонки по размерам нет. А как сделать по количеству видно из ответа. – Qwertiy♦ 20 июн '16 в 9:35