绝对定位Div无法随屏幕自适应缩放的解决求助

我想让带有图片的元素同时使用position属性并实现自动缩放，PC端显示正常，但手机端或PC屏幕缩放时失效。以下是对应的HTML和CSS代码：

HTML代码 #

<div class="main-container">
    <div class="relative">
        <img src="../imgs/header_single.jpg" alt="header" class="img-header">
    
        <div class="overlap" >
                <img src="../imgs/compra-online.png" alt="goomer" style="width: 100%; height: 100%;">
        </div>
    </div>
 </div>

CSS代码 #

.main-container{
    text-align: center;
    margin: 2rem ;
}

.relative{
    position: relative
}

.img-header{
    max-width: 100%;
    height: auto;
    margin-bottom: 2rem;
    position: relative;
}

.overlap{
    position: absolute;
    width: 360px; 
    height: 219px;
    top: 3rem;
    left: 1.25rem;
}

屏幕缩放时，.overlap类的Div无法自适应调整尺寸，试了设置height:auto也没用，求指导如何让这个Div实现动态缩放。

解决方案 #

问题根源 #

.overlap用了固定像素的宽高和固定单位的定位值，屏幕缩放时不会跟随父元素（背景图容器）的尺寸变化，自然无法自适应。

修改步骤及代码 #

1. 给父容器.relative设置宽度限制，让它完全包裹背景图，作为绝对定位的参考基准
2. 把.overlap的宽高改成百分比单位，同时用aspect-ratio维持图片比例，不用固定高度
3. 把定位的top/left改成百分比，让位置也随父容器缩放

修改后的CSS代码：

.main-container{
    text-align: center;
    margin: 2rem ;
}

.relative{
    position: relative;
    max-width: 100%; /* 限制容器最大宽度不超过屏幕 */
    display: inline-block; /* 让容器只包裹图片，不占满屏幕宽度 */
}

.img-header{
    max-width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

.overlap{
    position: absolute;
    width: 40%; /* 按原图比例计算：比如背景图原宽900px，360/900=40%，可根据实际情况调整 */
    aspect-ratio: 360/219; /* 维持叠加图原始宽高比，自动计算高度 */
    top: 10%; /* 替换固定3rem，用百分比跟随父容器高度调整 */
    left: 5%; /* 替换固定1.25rem，用百分比跟随父容器宽度调整 */
}

说明 #

• aspect-ratio: 360/219：保证叠加图始终保持原始的宽高比例，设置后无需手动写height，浏览器会自动计算对应高度
• 百分比的宽高和定位值：让元素的尺寸、位置都基于父容器动态调整，屏幕缩放时会自动适配
• 如果需要针对特定屏幕尺寸做更精细的调整，可以结合@media媒体查询修改百分比数值

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