Flexbox布局下图片压缩时比例丢失问题求助

现有一个column方向的flex容器A，内部包含若干row方向的flex容器B，每个B容器内有文本和img标签图片，存在以下问题：

• 向容器A添加新元素时，图片会被压缩
• 容器A宽度大幅压缩时，图片会丢失宽高比例

现有样式代码 #

容器A样式 #

display:flex;
flex-direction:column;
justify-content:space-between;
gap:12px;
padding-left:32px;
padding-right:32px;
box-sizing:border-box;

成对容器样式 #

flex:1;
display:flex;
gap:12px;

容器B样式 #

background-color:var(--AltColor);
border-radius:12px;
display:flex;
justify-content:space-between;
align-items:center;
flex:1 0 0;
color:var(--TextMainColor);
padding:8px;

带包裹层的图片代码 #

<div style={{width:'100%',height:'100%'}}>
    <img src={props.img} style={{height:'0',minHeight:'100%',backgroundColor:'var(--ThemeColor)',maxWidth:'100%'}}/>
</div>

已尝试方案及问题 #

• 使用aspect-ratio：导致容器在auto值指定的轴向上无法压缩
• 使用padding-bottom:100%维持比例：因图片height被设为0，无法显示

要求 #

• 不提供基于rem、vw、vh的解决方案
• 必须保留img标签

内容的提问来源于stack exchange，提问作者t3vs q2da