移動端圖片自適應全屏鋪滿屏幕

本文轉載自查看原文 2020-05-13 16:43 2737 移動端h5/ CSS篇/ JS篇

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 移動端開發圖片自適應高度和自動全屏移動端canvas文字圖片合成並生成圖片（canvas寬度自適應移動端屏幕）

寫移動端自適應屏幕的方法移動端屏幕寬度自適應原理及實現移動端的自適應移動端webview屏幕自適應寫法+Echarts自適應寫法手機端圖片自適應屏幕尺寸移動端自適應方式 HTML + CSS CSS設置背景圖片后圖片沒有鋪滿屏幕等