移动端开发图片自适应高度和自动全屏代码,Css代码库,德仔网

代码语言

代码分类

【Css】移动端开发图片自适应高度和自动全屏

作者:沅泽 / 发布于2017/3/31/ 595

.mainBox{
    width: 100%;
    background-color: #EBB02F;
    background: url("../images/bg.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden
}
.mainBox:after{
    content: "";
    display: block;
    padding-top: 160%;
}
对应 html
<!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>
    <link rel="stylesheet" href="css/group_style.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script type="text/javascript">
        function setHeight()
        {
            var max_height = document.documentElement.clientHeight;
            var primary = document.getElementById('mainBox');
            primary.style.minHeight = max_height+"px";
            primary.style.maxHeight = max_height+"px";
        }
    </script>
</head >
<body onload="setHeight();" onresize=" setHeight()">
    <div class="mainBox" id="mainBox">
        
    </div>
</body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

沅泽贡献的其它代码(20)