-2

jqueryを使用してdiv（#bg）内に画像を追加し、自動サイズ変更Webページを作成したいと思います。これまでのところ、このようにコーディングしましたが、自動サイズ変更にはいくつかの問題があります。画像を手動でdivに追加すると、すべて正常に機能します。すばらしい答えを詳しく説明していただければ、私はjqueryの初心者です。前もって感謝します。

HTML

<div id="bg">​
</div>`

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }`

jquery

$(window).load(function() { 

    $('#bg').prepend('<img src="Background.jpg" id="bg" alt="" />')

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});
4

1 に答える 1

0

私は数日前に同様の関数を書きました：

HTML

<img src="http://ge.tt/api/1/files/1jN8IzR/0/blob?download" class='bg'>

CSS は本当に必要ありません

.bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1
}

JS

var fitPic = (function() {
    var winW = $(window).width(),
        winH = window.innerHeight || $(window).height(); // `innerHeight` for mobile safari

    $(".bg").each(function() {

        var elem = $(this),
            elemW = elem.width(),
            elemH = elem.height(),

            imgW = (elemW * winH) / elemH,
            imgH = (elemH * winW) / elemW,

            newW = imgH < winH ? imgW : winW,
            newH = imgH < winH ? winH : imgH;

        this.style.width = newW + "px";
        this.style.height = newH + "px";

    });
});

$(window).on('load resize', fitPic);
于 2012-12-17T16:00:53.487 に答える