Как создать блок галереи где изображения разных размеров должны формироваться в сетку?
Есть блок с размерами например 100% и фиксированной высотой в 500px. В этот блок будут поступать фото с бэкенда, их может быть разное количество от 1 до 10. Как сделать так, чтобы независимо от количества картинок они заполняли всё пространство блока. Например как реализовано вк?
Может есть какие-то massonry плагины специально для фото?
Дополнительно:
это не masonry, тут ровные ряды. Это flex-блок с детьми со flex-grow, а остальное по вкусу)
Ответы:
В самом простом случае вполне подойдет решение "в лоб".
Проектируете 10 сеток на все случаи количества картинок от 1 до 10.
На каждый случай описываете грид-сетку.
Такой вариант не будет учитывать пропорции картинок (альбом/портрет).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания блока галереи, где изображения разных размеров будут формироваться в сетку, можно воспользоваться CSS Grid или библиотекой, такой как Masonry или Isotope. В данном примере, я расскажу как создать такую галерею с использованием CSS Grid.
Прежде всего, необходимо создать HTML структуру для галереи. Например:
<div class="gallery"> <div class="item"><img src="image1.jpg" alt="Image 1"></div> <div class="item"><img src="image2.jpg" alt="Image 2"></div> <div class="item"><img src="image3.jpg" alt="Image 3"></div> <!-- Добавьте сколько угодно элементов --> </div><div class="gallery"> <div class="item"><img src="image1.jpg" alt="Image 1"></div> <div class="item"><img src="image2.jpg" alt="Image 2"></div> <div class="item"><img src="image3.jpg" alt="Image 3"></div> <!-- Добавьте сколько угодно элементов --> </div>
Затем, стилизуем галерею с помощью CSS:
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px; } .item { margin: 0; padding: 0; } .item img { max-width: 100%; height: auto; }
В данном примере, мы используем CSS Grid для создания сетки изображений. С помощью свойства `grid-template-columns` мы задаем количество колонок и их размеры. `auto-fill` позволяет автоматически добавлять новые колонки при добавлении новых элементов, а `minmax(200px, 1fr)` задает минимальную ширину колонки в 200px и равномерно распределяет доступное пространство между колонками.
Таким образом, вы создадите блок галереи, в который изображения разных размеров будут автоматически формироваться в сетку, сохраняя при этом пропорции и красивый внешний вид.