Создание масштабируемой и масштабируемой сетки изображений с использованием flexbox

Question

Я пытаюсь создать масштабируемую / масштабируемую сетку изображений с помощью FlexBox.

Проблема заключается в том, что всякий раз, когда пропорции изображения слишком малы из-за изменения размера окна, FlexBox помещает дополнительные изображения в предыдущие строки, чтобызаполните пробел.

Хорошо выглядит при некоторых пропорциях окна.Но если окно слишком короткое по высоте и слишком длинное по ширине, изображения из нижних рядов будут перемещаться в верхние.

Я пробовал использовать флексбоксы и таблицы.При использовании FlexBox я также пытался установить ширину элементов flex, используя свойство flex для изображений.Проблема в том, что изображения будут растягиваться и искажаться, чтобы заполнить необходимое пространство.

Вот код, с которым я работаю:

html, body { 
  height: 100%;
  width: 100%;
  margin: 0;
}

#flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  background-color: blue;
  height: 100%;
}

#flex-container>img {
  width: auto;
  height: auto;
  max-width: 25%;
  max-height: 50%;
  margin: auto;
}

<div id="flex-container">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">

  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
</div>

Я хочу, чтобы изображения оставались в одной строке и столбце, меняя размер только в соответствии с размером страницы.

Мне не нужно для использования FlexBox, но, похоже, это лучший способ выполнить эту задачу.

Answer 1

Flexbox - хороший выбор для этой компоновки, но есть некоторые хитрые побочные эффекты, когда изображения являются элементами flex.Чтобы сделать это более простым, я считаю очень полезным помещать изображения в div-обертки.

Управляйте количеством элементов в строке теперь с помощью width, вы можете использовать медиа-запросы для изменения шириныпоскольку экран становится меньше, но вам нужно будет пересмотреть 100% фиксированную высоту контейнера в этой точке.

Я поместил комментарии в CSS, чтобы выделить важные биты.

* {
  box-sizing: border-box; /* so borders and padding dont get in the way */
}

html,
body {
  height: 100%; /* you didint need width 100% here */
  margin: 0;
}

#flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 100%;
}

.img-wrap {
  width: 25%;
  height: 50%;
  display: flex; /* flexbox layout for the image wrappers, allows for... */
  align-items: center; /* ...easy centering */
  justify-content: center;
  padding: 10px; /* just some spacing so the images can breathe, remove if you want them edge to edge */
  border: 1px solid red; /* so you can easily see the bounds of the wrapper divs, remove this */
}

.img-wrap img {
  max-width: 100%; /* max dimensions on the images so they always fit */
  max-height: 100%;
  height: auto; /* maintain aspect ratio */
  width: auto;
}

<div id="flex-container">
  <div class="img-wrap"><img src="https://picsum.photos/200"></div>
  <div class="img-wrap"><img src="https://picsum.photos/300/200"></div>
  <div class="img-wrap"><img src="https://picsum.photos/400/800"></div>
  <div class="img-wrap"><img src="https://picsum.photos/500/250"></div>

  <div class="img-wrap"><img src="https://picsum.photos/450/505"></div>
  <div class="img-wrap"><img src="https://picsum.photos/350/520"></div>
  <div class="img-wrap"><img src="https://picsum.photos/250/300"></div>
  <div class="img-wrap"><img src="https://picsum.photos/550/200"></div>
</div>