文章/答案/技术大牛

发布

社区首页 >问答首页 >背景图片修复设备大小phonegap

问背景图片修复设备大小phonegap
EN

Stack Overflow用户

提问于 2013-03-21 19:00:02

回答 1查看 2.2K关注 0票数 0

1.Load image fix size of image

(function($) {
    $.fn.fullBg = function() {
        var bgImg = $(this);
        function resizeImg() {
            var imgwidth = bgImg.width();
            var imgheight = bgImg.height();

            var winwidth = $(window).width();
            var winheight = $(window).height();

            var widthratio = winwidth / imgwidth;
            var heightratio = winheight / imgheight;

            var widthdiff = heightratio * imgwidth;
            var heightdiff = widthratio * imgheight;

            if (heightdiff > winheight) {
                bgImg.css({
                    width : winwidth + 'px',
                    height : heightdiff + 'px'
                });
            } else {
                bgImg.css({
                    width : widthdiff + 'px',
                    height : winheight + 'px'
                });
            }
        }
        resizeImg();
        $(window).resize(function() {
            resizeImg();
        });
    };
})(jQuery)

2.index.html

<script type="text/javascript" charset="utf-8" src="js/main.js">
            $(window).load(function() {
                $("#background").fullBg();
            });
        </script>
    </head>
    <body>
        <img src="img/main_bg.png" alt="" id="background" />
        <div id="maincontent">
            <!-- Your site content goes here -->
        </div>
    </body>

3和css文件如下所示

 fullBg {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}

#maincontent {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

这张图片是可滚动的，所以他们看到的都是空白。

提前感谢朋友们。欢迎大家提出任何想法，谢谢。

cordova

phonegap-plugins

phonegap-build

回答 1

Stack Overflow用户

发布于 2013-03-21 19:45:58

尝试这个css背景属性，希望它能帮助你....

你的身体背景div css看起来像这样

<style type="text/css">
.backgroud {
    background:url(image.jpg) repeat;
    background-size: 100%;
}
</style>

html看起来像这样

<body>
    <div class="background">
        <div class="content"> -- Page Content --- </div>
    </div>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15545612

复制

相似问题

问背景图片修复设备大小phonegap
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图片修复设备大小phonegapEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图片修复设备大小phonegap
EN