web之设置头部固定高度，剩下部分填充图片，并让图片铺满剩下宽高，不能滚动（适配pc和手机）

  .footer{
         width: 100%;
        height: 50px;
        position: absolute;
        top:0px;
        left: 0;
        z-index: 1;
     }     

         <!--2.头部-->

                <div class="footer">
                  

                </div>

                <!--3.中间容器-->
       <div style="width:100%;padding:0 10px; box-sizing:border-box;margin:auto;overflow: hidden; margin-top:50px;">
                   <img class="lazy-img tupian"  src="aaa.jpg"/>
                </div>    

                <!--中间结束-->

js代码：

       var clientW = document.documentElement.clientWidth;//获取浏览器窗口文档显示区域的宽度，不包括滚动条。
        console.log("==========获取浏览器窗口文档显示区域的宽度clientW=="+clientW);  
        var scalew = clientW - 40;
        var scaleh = document.documentElement.clientHeight-70;
        console.log("==========scalew=="+scalew);
        console.log("======scaleh=="+scaleh);    

           //是图片宽高适应屏幕大小
           $('.lazy-img').css({'width': scalew, 'height': scaleh});