Используйте flexbox для адаптации высоты изображения

Question

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

Дело в том, что изображения меняют свою высоту, но ширина действует странно. Даже когда я установил height: 100% и width: auto.

Я сделал для этого упрощенную ручку: https://codepen.io/oliverspies/pen/zaeVRw

.flexContainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.bottom {
  flex: 0 2 25rem;
  height: 100%;
  max-height: 25rem;
  display: flex;
  justify-items: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.bottom img {
  height: 100%;
  width: auto;
  display: block;
  margin-right: 1rem;
}

<div class="flexContainer">
  <div class="top">
    Content
  </div>
  <div class="bottom">
    <img src="https://picsum.photos/g/600?random">
    <img src="https://picsum.photos/600">
    <img src="https://picsum.photos/600?random">
  </div>
</div>

Итак, в конечном итоге я хочу добиться того, чтобы изображения имели высоту 400px, если доступная высота не меньше, тогда изображения должны уменьшаться, но соотношение сторон должно оставаться неизменным. Я думаю, что проблема возникает только тогда, когда размер окна изменяется так, что высота изображений не превышает 400 пикселей.

Answer 1

.flexContainer{
    display: flex;
     flex-direction: column;
}
 ul{
    list-style: none;
     column-count: 3;
     margin: 0;
     padding: 0;
}
 .top{
    background: red;
     color: white;
     font-size: 1.4rem;
     padding: 1em;
     padding-bottom: 1em;
     padding-bottom: 2em;
     flex: 2 0 auto;
}
 .bottom{
     background: blue;
     display: flex;
     justify-content: space-between;
}
 .bottom > div:nth-child(2){
    margin: 0 1rem;
}
 .bottom img{
     max-width: 100%; vertical-align: top; 
}

<div class="flexContainer">
    <div class="top">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li>nine</li>
        </ul>
    </div>
    <div class="bottom">
        <div><img src="https://picsum.photos/g/600?random"></div>
        <div><img src="https://picsum.photos/600"></div>
        <div><img src="https://picsum.photos/600?random"></div>
    </div>
</div>

Answer 2

Вы можете заключить каждое IMG в div. Затем установите высоту div на 400px и максимальная высота img до 100%

.img-обертка { Высота: 400px }

.img-wrapper img { макс-высота: 100% }

Answer 3

Я думаю, что вы должны удалить flexbox из изображений и просто позволить им быть встроенными, как по умолчанию и использовать max-height: 100%:

.flexContainer{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.bottom{
  flex: 0 2 25rem;
  height: 100%;
  max-height: 25rem;
}

.bottom img{  
  max-height: 100%;
  margin-right: 1rem;
}

<div class="flexContainer">
  <div class="top">
    Content
  </div>
  <div class="bottom">
    <img src="https://picsum.photos/g/600?random">
    <img src="https://picsum.photos/600">
    <img src="https://picsum.photos/600?random">
  </div>
</div>