Question

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;
}

此图片可滚动，因此他们在所有侧面看到了一个空白区域

Getting image

what i want image look like this

先谢谢你们。欢迎任何想法，谢谢。

Answer 1

试试这个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>

背景图像修复设备大小phonegap

1 个答案: