缩放图像以适应flexbox布局

Question

我正在使用flexbox进行页面布局。该页面包含图像，带文本的div和页脚div。图像和文本div应该并排。我希望图像缩放以填充父div（div与class .main）的高度，同时保持其原始宽高比。文本div将占用剩余的水平空间。页脚将位于底部。

不同尺寸的理想结果，作为参考：

这是我目前的情况： https://codepen.io/anon/pen/aGPPaq

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我发现使用图像的绝对定位可以缩放图像，但这样就不会将文本推向右侧（图像将覆盖文本）。这个css：

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

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

我似乎无法弄清楚如何实现这种看似简单的布局。有人有任何建议吗？

谢谢！

Answer 1

你可以这样做。您需要为图像高度设置vh单位（视口高度）。但如果不想滚动，您还需要从图像中排除页脚height。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在您的代码中我只添加了更改...我已将宽度添加为50％，但您可以根据需要更改图像的宽度。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;