Html 缩放图像以适应flexbox布局

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

不同尺寸下的预期结果，作为参考：

以下是我目前的情况：

正文{
保证金：0；
}
.集装箱{
位置：绝对位置；
最小高度：100%；
显示器：flex；
弯曲方向：立柱；
背景：浅灰色；
}
.页脚{
flex-grow:0；
弹性收缩：0；
背景：浅粉红色；
}
梅因先生{
显示器：flex；
弯曲方向：行；
柔性生长：1；
弹性收缩：1；
身高：100%；
背景：黄色；
}
.形象{
身高：100%；
}
.文本{
背景：浅蓝色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce-neque sem、congue nec malesuada ac、cursus eu metus。阿利奎姆·尤伊斯莫·马莱苏亚达·马萨（euismod malesuada massa），ac iaculis nunc mollis nec。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。完整的完整的定义，不需要使用lacinia lacus euismod ut。不，我不知道。莫比调味品finibus scelerisque。埃尼安·森佩尔、埃拉特·福西布斯·弗里利亚·福西布斯、莱克特斯·图皮斯·康格·洛雷姆、nec-consequeat-arcu-magna-eu-felis。请大家分享。Nam在sapien ut augue convallis。
页脚内容（可变高度）

您可以这样做。您需要为图像高度设置

vh

单位（视口高度）。但如果不想滚动，还需要从图像中排除页脚

height

正文{
保证金：0；
}
.集装箱{
位置：绝对位置；
最小高度：100%；
显示器：flex；
弯曲方向：立柱；
背景：浅灰色；
}
.页脚{
flex-grow:0；
弹性收缩：0；
背景：浅粉红色；
}
梅因先生{
显示器：flex；
弯曲方向：行；
柔性生长：1；
弹性收缩：1；
背景：黄色；
}
.形象{
高度：计算（100vh-18px）；
宽度：自动；
}
.文本{
背景：浅蓝色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce-neque sem、congue nec malesuada ac、cursus eu metus。阿利奎姆·尤伊斯莫·马莱苏亚达·马萨（euismod malesuada massa），ac iaculis nunc mollis nec。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。完整的完整的定义，不需要使用lacinia lacus euismod ut。不，我不知道。莫比调味品finibus scelerisque。埃尼安·森佩尔、埃拉特·福西布斯·弗里利亚·福西布斯、莱克特斯·图皮斯·康格·洛雷姆、nec-consequeat-arcu-magna-eu-felis。请大家分享。Nam在sapien ut augue convallis。
页脚内容（可变高度）

在您的代码中，仅我添加了更改…我添加了50%的宽度，但您可以根据需要更改图像的宽度

正文{
保证金：0；
}
.集装箱{
位置：绝对位置；
最小高度：100%；
显示器：flex；
弯曲方向：立柱；
背景：浅灰色；
}
.页脚{
flex-grow:0；
弹性收缩：0；
背景：浅粉红色；
}
梅因先生{
显示器：flex；
/*弯曲方向：行；
柔性生长：1；
弹性收缩：1*/
宽度：100%；
背景：黄色；
}
.形象{
身高：100%；
宽度：50%；
}
.文本{
背景：浅蓝色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce-neque sem、congue nec malesuada ac、cursus eu metus。阿利奎姆·尤伊斯莫·马莱苏亚达·马萨（euismod malesuada massa），ac iaculis nunc mollis nec。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。完整的完整的定义，不需要使用lacinia lacus euismod ut。不，我不知道。莫比调味品finibus scelerisque。埃尼安·森佩尔、埃拉特·福西布斯·弗里利亚·福西布斯、莱克特斯·图皮斯·康格·洛雷姆、nec-consequeat-arcu-magna-eu-felis。请大家分享。Nam在sapien ut augue convallis。
页脚内容（可变高度）

谢谢，但这会使图像的大小与页面宽度相关。我希望它是相对于页面的高度，正如我在问题中所说的。这确实有效，但遗憾的是，在我的用例中，页脚的高度可能会有所不同。所以我不能在vh中使用固定值。基本上，.main div的高度应该由flexbox确定（它有flex-shorn:1和flex-grow:1，因此它将自动填充页脚未使用的垂直空间）。图像的高度应与.main div相同。