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

この画像はスクロール可能であるため、すべての側面に空白が表示されます

画像の取得

私が欲しい画像はこのように見える

よろしくお願いします。どんなアイデアでも大歓迎です。

4

1 に答える 1

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>
于 2013-03-21T11:45:57.943 に答える