移动端图片自适应全屏铺满屏幕 

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .mainBox {
            width: 100%;
            height: 100%;
            background-color: #EBB02F;
            background: url("http://gw2.kongzhong.com/m/ydgw/img/bg1.jpg") top center no-repeat;
            background-size: cover;
        }
    </style>

</head>

<body onload="setHeight();" onresize="setHeight()">
    <div class="mainBox" id="mainBox"></div>
    <script type="text/javascript">
        function setHeight() {
            let auto_height = document.documentElement.clientHeight;
            let mainBox = document.getElementById('mainBox');
            mainBox.style.height = auto_height + "px";
        }
    </script>
</body>

</html>

 

posted @ 2020-05-13 16:43  宫圆薰  阅读(3335)  评论(0)  编辑  收藏  举报