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

最新推荐文章于 2024-07-26 11:09:07 发布

weixin_34194359

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量367

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chenqingyu000/p/5869066.html

版权

.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 οnlοad="setHeight();" οnresize=" setHeight()">
    <div class="mainBox" id="mainBox">

    </div>
</body>
</html>

转载于:https://www.cnblogs.com/chenqingyu000/p/5869066.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34194359

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端开发图片自适应高度和自动全屏

.mainBox{ width: 100%; background-color: #EBB02F; background: url("../images/bg.png") no-repeat; background-size: 100% 100%; overflow: hidden}.mainBox:after{ content: ""; display:...
复制链接

扫一扫