移动设备中的图像宽度和高度问题

Question

所以我的标题设计看起来像这样（见下图）

header design

所以网站的桌面版本一切正常，但我在移动版本中遇到问题。图像没有响应。基本上我想将标题设计转换为工作代码。请帮忙！

代码

html, body {
    padding:0;
    margin:0;
    width: 100%;
    height: 100%;
}

#img{
    position: absolute;
    right: 100;
    top: 35px;
    z-index: -1;
    width: 30%;
}


#img2{
    position: absolute;
    right: 0;
    left: 100;
    margin-top: 30px;
    margin-left: 10em;
    top: 50px;
    z-index: -1;
    width: 30%;
}
<header>
    <div class="col-lg-12" style="margin-bottom: 10em;">
        <div class="row">
            <div class="col-lg-8  my-auto mt-3 mb-5">
                <h2 style="font-weight: bolder;margin-top: 2em;margin-left:1em;font-size: 7vw;font-family: 'Poppins', sans-serif;" data-sal="slide-up" style="margin-left: 1.5em;" data-sal-delay="1500" data-sal-easing="ease-out-bouce" data-sal-duration="1200"><span class="mb-5">Capture your</span><br><span>priceless</span><br><span>moments</span><br><span>with aw zone</span></h2>     
                </div>
                <div id="img">
                    <img src="https://images.pexels.com/photos/1024613/pexels-photo-1024613.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" width="300" class="thumbnail">
                </div>
                <div id="img2">
                    <img src="https://images.pexels.com/photos/1024613/pexels-photo-1024613.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" width="300">
                </div>
        </div>
  </div>
  </header>

Answer 1

对于移动版本，您必须在 CSS 中插入 媒体查询。检查此link，您肯定会找到答案。只需将媒体查询添加到您的 CSS 代码中即可。