Изменение размера изображения Flexbox

Question

У меня возникают проблемы с полным изменением размера изображений.

В идеале я хочу, чтобы размер изображения был изменен, чтобы параметр соответствовал экрану, в настоящее время он соответствует только ширине, почему так? Можно ли получить желаемое поведение, просто используя css, возможно, нужен медиа-запрос? Опаленный гуглом пытается найти похожую проблему, но не повезло!

Заранее спасибо!

UPDATE:

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

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: aqua;
}

.content {
    display: flex;
    overflow-x: auto;
    flex: 2 1 auto;
    flex-wrap: nowrap;
}

.content::-webkit-scrollbar {
    display: none;
}

.option {
    display: flex;
    flex-direction: column;
    margin: auto 1em;
    width: 90%;
    height: 70%;
    text-align: justify;
    border: 3px solid black;
}

.img {
    flex: 1;
}

.title {
    flex: 0;
    font-weight: bold;
    text-align: center;
    flex: 1;
    margin: auto;
}

.desc {
    flex: 0;
}

.header {
    flex: 2;
    text-align: center;
    background-color: red;
}

.footer {
    flex: 1;
    background-color: brown;
}

<div class="container">
        <div class="header">
            Fusce pellentesque ante.
        </div>
        <div class="content">
            <div class="option">
                <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
                <p class="title">Proin hendrerit.</p>
                <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
            </div>
            <div class="option">
                <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
                <p class="title">Nullam at.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
            </div>
            <div class="option">
                <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
                <p class="title">Sed nec.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
            </div>
            <div class="option">
                <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
                <p class="title">Morbi in.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
            </div>
            <div class="option">
                <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
                <p class="title">Mauris ac.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
            </div>
        </div>
        <div class="footer">
            <p>Quisque venenatis volutpat dictum. Praesent.</p>
        </div>
    </div>

Fiddle

Answer 1

Надеюсь, это то, что вы хотите. Если это правильный ответ! Вот что я сделал.

• присваивает классу высоты и ширины контейнера 100% и устанавливает отображение на flex и flex-direction: column, чтобы заголовок, нижний колонтитул и класс содержимого выравнивались по вертикали.
• Теперь, если вы установили класс контента flex prorperty в 1, он покоится по ширине и высоте.
• присваивает параметру class свойство display: flex и задает flex-direction: column, чтобы изображение, заголовок и описание выравнивались по вертикали.
• путем присвоения min-height из 30px заголовку и p в опциях, остальное пространство может быть назначено изображению, что, я надеюсь, то, что вы хотите.

* {
  margin: 0;
  padding: 0;
}

.content {
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 30px 0;
}

.content .option {
  flex: 1;
  max-height: 100vh;
  min-width: 100%;
  display: flex;
  flex-direction: column;
}

.content .option img {
  height: calc(100% - 160px);
  width: 100%;
}
.content .option p {
  height: 20px;
}

.content .option p:nth-child(2) {
  height: 40px;
}

.header,
.footer {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #ccc;
  height: 30px;
}

.header {
  top: 0;
}

.footer {
  bottom: 0;
}

<div class="container">
  <div class="header">
    Fusce pellentesque ante.
  </div>
  <div class="content">
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Proin hendrerit.</p>
      <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Nullam at.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Sed nec.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Morbi in.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Mauris ac.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
    </div>
  </div>
  <div class="footer">
    <p>Quisque venenatis volutpat dictum. Praesent.</p>
  </div>
</div>

Answer 2

html,
body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: aqua;
  justify-content: space-between;
}

.header,
.footer {
  flex: 0 1 auto;
  text-align: center;
}

.content {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}

.footer {
  background-color: brown;
}

img {
  max-width: 600px;
}

<div class="container">
  <div class="header">
    Fusce pellentesque ante.
  </div>
  <div class="content">
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Proin hendrerit.</p>
      <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Nullam at.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Sed nec.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Morbi in.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
    </div>
    <div class="option">
      <img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
      <p class="title">Mauris ac.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
    </div>
  </div>
  <div class="footer">
    <p>Quisque venenatis volutpat dictum. Praesent.</p>
  </div>
</div>