Масштабирование изображения под макет flexbox

Question

Я работаю над макетом страницы, используя flexbox.Страница содержит изображение, div с текстом и div нижнего колонтитула.Изображение и текстовый div должны располагаться рядом.Я хочу, чтобы изображение масштабировалось, чтобы заполнить высоту родительского div (div с class .main), сохраняя при этом исходное соотношение сторон.Текст div будет занимать оставшееся горизонтальное пространство.Нижний колонтитул будет внизу.

Требуемый результат в разных размерах, для справки:

Вотмоя текущая ситуация: https://codepen.io/anon/pen/aGPPaq

body{
  margin: 0;
}

.container{
  position: absolute;
  min-height: 100%;
  
  display: flex;
  flex-direction: column;
  
  background: lightgrey;
}

.footer{
  flex-grow: 0;
  flex-shrink: 0;
  
  background: lightpink;
}

.main {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  height: 100%;
  
  background: yellow;
}

.image{
  height: 100%;
}

.text{
  background: lightblue;
}

<div class="container">
  <div class="main">
      <img class="image" src="https://picsum.photos/400/600?image=28">
    
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque sem, congue nec malesuada ac, cursus eu metus. Aliquam euismod malesuada massa, ac iaculis nunc mollis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dictum finibus magna, nec lacinia lacus euismod ut. Nam non tellus odio. Morbi condimentum finibus scelerisque. Aenean semper, erat faucibus fringilla faucibus, lectus turpis congue lorem, nec consequat arcu magna eu felis. Praesent eget quam velit. Nam in sapien ut augue imperdiet convallis. 
    </div>
  </div>
  <div class="footer">
    Footer content (variable height)
  </div>
</div>

Я обнаружил, что масштабирование изображения возможно с использованием абсолютного позиционирования изображения, но таким образом текст не будет сдвинут вправо (изображение будетналожение текста).CSS для этого:

.main {
  /* ... */
  position: relative;
}

.image{
  position: absolute;
  height: 100%;
}

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

Спасибо!

Answer 1

Только в вашем коде я добавил изменения ... Я добавил ширину как 50%, но вы можете изменить ширину изображения в соответствии с вашими требованиями.

body{
  margin: 0;
}

.container{
  position: absolute;
  min-height: 100%;
  
  display: flex;
  flex-direction: column;
  
  background: lightgrey;
}

.footer{
  flex-grow: 0;
  flex-shrink: 0;
  
  background: lightpink;
}

.main {
  display: flex;
/*   flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1; */
 width:100%;
  
  background: yellow;
}

.image{
  height: 100%;
  width:50%;
}

.text{
  background: lightblue;
}

<div class="container">
  <div class="main">
      <img class="image" src="https://picsum.photos/400/600?image=28">
    
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque sem, congue nec malesuada ac, cursus eu metus. Aliquam euismod malesuada massa, ac iaculis nunc mollis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dictum finibus magna, nec lacinia lacus euismod ut. Nam non tellus odio. Morbi condimentum finibus scelerisque. Aenean semper, erat faucibus fringilla faucibus, lectus turpis congue lorem, nec consequat arcu magna eu felis. Praesent eget quam velit. Nam in sapien ut augue imperdiet convallis. 
    </div>
  </div>
  <div class="footer">
    Footer content (variable height)
  </div>
</div>

Answer 2

Вы можете сделать что-то вроде этого.вам нужно установить vh единицу (Viewport Height) для высоты изображения.но вы также должны исключить нижний колонтитул height из изображения, если не хотите прокрутки.

body{
  margin: 0;
}

.container{
  position: absolute;
  min-height: 100%;
  
  display: flex;
  flex-direction: column;
  
  background: lightgrey;
}

.footer{
  flex-grow: 0;
  flex-shrink: 0;
  
  background: lightpink;
}

.main {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  
  
  background: yellow;
}

.image{
  height: calc(100vh - 18px);
  width: auto;
}

.text{
  background: lightblue;
}

<div class="container">
  <div class="main">
      <img class="image" src="https://picsum.photos/400/600?image=28">
    
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque sem, congue nec malesuada ac, cursus eu metus. Aliquam euismod malesuada massa, ac iaculis nunc mollis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dictum finibus magna, nec lacinia lacus euismod ut. Nam non tellus odio. Morbi condimentum finibus scelerisque. Aenean semper, erat faucibus fringilla faucibus, lectus turpis congue lorem, nec consequat arcu magna eu felis. Praesent eget quam velit. Nam in sapien ut augue imperdiet convallis. 
    </div>
  </div>
  <div class="footer">
    Footer content (variable height)
  </div>
</div>