我试图自动调整图像元素的大小，同时使用位置。在电脑屏幕上运行良好，但在手机上无法运行，甚至在调整电脑屏幕大小时也无法运行。

这是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类不会调整大小。已经尝试将高度:自动，但它不工作。我在这方面是新手。有人能帮助我如何动态调整重叠部分的大小吗？

调整大小