Представление изображений динамически многорядных многоколоночных - PullRequest
Новая
       61

Представление изображений динамически многорядных многоколоночных

0 голосов
/ 07 декабря 2018

Я хочу представить около 20 изображений на веб-странице.Изображения могут иметь книжную или альбомную ориентацию.Я хотел бы структурировать их по схеме 3 на ряд на больших экранах, уменьшив их до 1 на ряд на мобильных телефонах, возможно, 2 на ряд на планшетоподобных устройствах.Но расположение также может зависеть от ориентации области просмотра.У меня есть следующие требования:

  • Высота строки должна быть максимальной высотой любой фотографии в ряду.Например: с двумя портретными фотографиями и одним пейзажем подряд высота строки становится высотой портретных фотографий.
  • Пейзажная фотография должна быть размещена в центре ее ячейки и оставить свободное пространство сверху /внизу.
  • Портретные фотографии должны полностью занимать свои ячейки.
  • Столбцы должны быть поровну разделены по доступной ширине (33,33%, 50% или 100% ширины экрана).
  • Я также хотел бы, чтобы страница была отзывчивой, то есть изображения должны уменьшаться / увеличиваться в зависимости от ширины / высоты экрана браузера.
  • Заголовок для фотографии, размещаемой в центре изображения под верхней частью.изображения, для отображения счетчика или небольшого описательного текста.

Я прочитал много статей не для решения с таблицей, а с использованием div-решения.Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 07 декабря 2018 

body {
  margin: 0;
  padding: 0;
}

.gallery {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.gallery > li {
  flex-basis: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: stretch;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gallery > li {
    flex-basis: calc(100% / 2);
  }
}
@media (max-width: 767px) {
  .gallery > li {
    flex-basis: calc(100% / 1);
  }
}
.gallery > li > figure {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin: auto;
}
.gallery > li > figure img {
  max-width: 100%;
  height: auto;
  display: block;
  order: 1;
}
.gallery > li > figure figcaption {
  order: 0;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  text-align: center;
  position: absolute;
}
<ul class="gallery"> 
  <li><figure><img src="https://picsum.photos/g/200/300?image=0" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=10" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=20" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=30" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/300/300?image=40" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=50" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=60" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/200/300?image=70" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=80" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=90" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=100" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=110" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/200/300?image=120" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=130" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=140" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=151" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=160" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=170" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=180" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=190" alt=""><figcaption>This is a caption</figcaption></figure></li>
</ul>
...