flex布局下如何实现容器高度自适应响应式图片且高度不超100vh

最终实现代码 #

/* 补充基础全局设置，避免高度计算偏差 */
html, body {
  height: 100%;
  margin: 0;
}
.container{
  display: flex;
  width: 100%;
  /* 限制容器最大高度不超过视口高度 */
  max-height: 100vh;
}
.text-block {
  width: 37.645448%;
  min-width:37.645448%;
  background: #e3e3e3;     
}
img {
  max-width:100%;
  /* 限制图片最大高度，同时保持原始宽高比自适应 */
  max-height: 100vh;
  height: auto;
}

生效逻辑说明 #

• flex容器默认align-items: stretch属性会自动让所有子项高度匹配最高子项的高度，这里最高子项为响应式图片，因此容器和两个文本块的高度会自动和图片高度保持完全一致
• 给容器和图片同时加了max-height: 100vh限制，页面放大时图片高度最多涨到视口高度就不再增加，容器高度也会同步被限制在100vh以内，不会超出视口范围

内容的提问来源于stack exchange，提问作者Alex Mleczko