Html 缩小一行图像以适应容器高度并保持纵横比

我想知道如何缩小一行图像，使它们都适合一个未指定高度的div。图像的放大比例不得超过其原始高度，并且必须保持其纵横比。另外，我希望将包含div的高度限制为最高图像的固有高度。图像标记没有高度或宽度属性

用我目前所拥有的。我使用flexbox和objectfit:scale-down实现了这一点。正在讨论的图像行是灰色的，并且位于具有绿色背景的div中。它们目前根本不可缩放，但它们至少在垂直和水平方向居中，就像我所希望的那样。下面是我想要达到的效果的图片（很抱歉在图片中将绿色背景切换为黄色）。代码片段下面有更多的细节，但这概括了基本问题

正文{
字体系列：arial；
字号：26px；
文本对齐：居中；
颜色：黑色；
背景色：白色；
}
smallhint先生{
字体大小：16px；
颜色：#8c8c8c；
}
img{
填充：0；
保证金：0；
字号：0；
显示：块；
对象匹配：按比例缩小；
最小高度：0；
}
.柔性柱{
显示器：flex；
弯曲方向：立柱；
填充：0px；
边际：0px；
高度：90vh；
flex-grow:0；
最小宽度：0；
最小高度：0；
}
.弹性行{
显示器：flex；
弯曲方向：行；
flex:0 1.5自动；
证明内容：中心；
对齐项目：居中；
背景颜色：绿色；
}
.背景{
显示器：flex；
弯曲方向：立柱；
最大高度：100%；
背景颜色：蓝色；
}
.小学{
位置：相对位置；
z指数：0；
右：0；
底部：0；
填充：0；
字号：0；
最小高度：0；
对齐项目：结束；
背景颜色：橙色；
}
.初级img{
左边距：自动；
右边距：自动；
边框样式：实心；
边框宽度：3倍；
边框颜色：黑色；
高度：计算（100%-2*3px）；
}
.面具{
位置：绝对位置；
z指数：1；
排名：0；
右：0；
宽度：100%；
身高：100%；
字号：0；
}
.非图像{
垫面：5px；
显示：内联；
背景颜色：粉红色；
}

一些文本
其他文本

添加一个

最小高度：0用于
.flex行的规则
。我想这意味着当我问这个问题的时候，它已经非常接近工作了

此解决方案保留了我在问题中提到的一个问题，即使用
对象拟合：缩放
（或
封面
）时，在图像周围创建的附加“填充”。所以，这意味着我将
添加一个
最小高度：0用于
.flex行的规则
。我想这意味着当我问这个问题的时候，它已经非常接近工作了

此解决方案保留了我在问题中提到的一个问题，即使用
对象拟合：缩放
（或
封面
）时，在图像周围创建的附加“填充”。所以，这意味着我将
你的问题有点模糊，很难看出你想要实现什么。您是如何尝试flex wrap属性的？是否有您非常不清楚的特定部分？我可能太接近这个问题了，以至于意识到它不清楚。我提供的图像有用吗？至于flex-wrap：我不希望图像被包装，所以我将其保留为默认的“nowrap”。谢谢您的时间。没有。你能分享最终产品的外观吗？以下是最终产品的图片和图片。以前，所有图像都是本机尺寸，因为浏览器高度足以容纳所有对象。之后，浏览器高度将降低。这会导致包含图像的div高度收缩。对于“次”图像行（黄色背景），这将强制纵向图像（左侧）收缩，同时保持其纵横比。横向图像（右）几乎不适合div，因此在本例中它不必收缩。再次感谢。你的问题有点模糊，很难看出你想要达到什么目的。您是如何尝试flex wrap属性的？是否有您非常不清楚的特定部分？我可能太接近这个问题了，以至于意识到它不清楚。我提供的图像有用吗？至于flex-wrap：我不希望图像被包装，所以我将其保留为默认的“nowrap”。谢谢您的时间。没有。你能分享最终产品的外观吗？以下是最终产品的图片和图片。以前，所有图像都是本机尺寸，因为浏览器高度足以容纳所有对象。之后，浏览器高度将降低。这会导致包含图像的div高度收缩。对于“次”图像行（黄色背景），这将强制纵向图像（左侧）收缩，同时保持其纵横比。横向图像（右）几乎不适合div，因此在本例中它不必收缩。再次感谢。