如何让图片填充Flexbox父容器高度并保持原宽高比？

我明白你想要实现的布局效果——图片与文本并排展示，图片撑满.main容器的高度同时保留自身原有的宽高比，文本区域占据剩余的水平空间，页脚固定在页面底部。你之前尝试用绝对定位导致图片覆盖文本的问题，其实只需要调整Flexbox的几个属性就能解决，咱们来一步步修改：

解决方案代码 #

CSS部分 #

body{ margin: 0; }
.container{ 
  position: absolute; 
  min-height: 100%; 
  display: flex; 
  flex-direction: column; 
  background: lightgrey; 
  width: 100%; /* 新增，确保容器占满页面宽度 */
}
.footer{ 
  flex-grow: 0; 
  flex-shrink: 0; 
  background: lightpink; 
}
.main { 
  display: flex; 
  flex-direction: row; 
  flex-grow: 1; 
  flex-shrink: 1; 
  /* 去掉height:100%，flex-grow:1已经让它占满剩余空间 */
  background: yellow; 
}
.image{ 
  height: 100%; 
  width: auto; /* 让宽度根据宽高比自动计算，保持原比例 */
  flex-shrink: 0; /* 禁止Flex容器压缩图片宽度，保证宽高比 */
  object-fit: cover; /* 可选：如果图片比例和容器高度不匹配，用cover填充高度；要完整显示图片则换为contain */
}
.text{ 
  background: lightblue; 
  flex-grow: 1; /* 让文本区域占据剩余的所有水平空间 */
  overflow: auto; /* 可选：文本过多时显示滚动条 */
}

HTML部分（无需修改） #

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

关键修改说明 #

• .container新增width:100%：确保容器占满页面的整个宽度，避免布局出现横向留白。
• .main移除height:100%：因为.main是.container的flex子项，flex-grow:1已经会让它自动填充容器除页脚外的所有垂直空间，不需要额外设置高度。
• .image的核心调整：
  • width:auto：让图片根据自身的宽高比自动计算宽度，保证不会拉伸变形。
  • flex-shrink:0：禁止Flex容器在空间不足时压缩图片的宽度，确保图片始终保持基于高度的正确宽高比。
  • object-fit:cover：可选属性，如果图片的原始宽高比和.main的高度不匹配，这个属性会让图片裁剪并填充整个高度区域；如果希望完整显示图片，可替换为object-fit:contain（此时图片可能会在左右留下空白，但能完整展示）。
• .text添加flex-grow:1：让文本区域自动占据.main容器中除图片外的所有剩余水平空间，实现图片和文本的并排布局。
• .text可选overflow:auto：当文本内容过多超出容器高度时，自动显示滚动条，避免内容溢出破坏布局。

这样修改后，就能实现你想要的效果：图片始终填满.main的高度并保持原比例，文本占满剩余空间，页脚固定在页面底部，且在不同屏幕尺寸下都能正常适配。

内容的提问来源于stack exchange，提问作者Bert Willekens