Заставьте флекс-элементы использовать 100% -ную высоту родительского элемента с flex-direction: row

Question

Итак, я пытаюсь разместить 3 флекс-элемента одинаковой высоты и ширины внутри флекс-контейнера.Мне удалось сделать так, чтобы 3 флекс-элемента имели одинаковую ширину.Однако первый flex-элемент имеет div (.images), который также является flex-контейнером, который содержит на несколько больше дочерних элементов, чем два других div-элемента (.images).Это приводит к тому, что высота 1-го изгибаемого элемента будет больше, чем у другого 2. Как сделать так, чтобы высота двух других изгибаемых элементов была такой же высоты, как и у первого, даже если у них нет одинакового количества дочерних элементов??Я исследовал эту проблему, но нашел ответы только тогда, когда для свойства flex-direction установлено значение column.В моем случае свойство flex-direction установлено в строку внутри контейнера flex.

body {margin: 0}

.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.flex-items {
  width: 33.333%;
  height: 100%;
}

.images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
}

<div class="flex-container">
  <div class="flex-items">
    <h1>Some Title</h1>
    <div class="images">
      <img src="image1.jpg" alt="">
      <img src="image2.jpg" alt="">
      <img src="image3.jpg" alt="">
      <img src="image4.jpg" alt="">
      <img src="image5.jpg" alt="">
    </div>
  </div>
  <div class="flex-items">
    <h1>Some Title</h1>
    <div class="images">
      <img src="image6.jpg" alt="">
      <img src="image7.jpg" alt="">
    </div>
  </div>
  <div class="flex-items">
    <h1>Some Title</h1>
    <div class="images">
      <img src="image8.jpg" alt="">
      <img src="image9.jpg" alt="">
    </div>
  </div>
</div>

Answer 1

Если вы не установите ширину и высоту изображений, они будут использовать автоматический режим, и масштабировать его от этого для гибкой коробки, в зависимости от того, какой браузер у вас, конечно.

Изображения можно манипулировать встраиваемыми или используя css, используя свойство высоты или ширины, пример обоих приведен ниже.

Встроенный пример 1:

<img src="#.png" width="auto" height="100%" />

Css Пример 2:

div.images > img {  
 height: 100%;  
 width: auto;  
}   

---

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

:)

Answer 2

Вам нужно дать изображениям .image высоту 100% и ширину авто - если вы хотите, чтобы они масштабировались пропорционально, вот так:

.images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%; (images is getting 100% height, but nothing is telling its children to go up in height)
    justify-content: center;
}

.images img { (address the children)
  height:100%;
  width:auto;
}