1

以下のコードを使用して、ページの画面全体を埋めました。私が実際に必要としているのは、高さを完全に埋めることです。幅を完全に埋めなくても問題ありません。背景画像をページの中央に配置し、ページの高さを 100% にするだけです。側面にスペースがあってもかまいません。もちろん、比率を維持する必要があります。コードを変更しようとしましたが、それができるかどうかわかりません。私はこれで時間を失いましたが、私よりも経験豊富な人にとってはかなり簡単だと思います. 事前にご意見をお寄せいただきありがとうございます。コードはここにあります：

    <img src="http://test.tucado.com/4play/_images/cdj2000-start.jpg" id="bg" alt="">
    <a href="home.html"><div id="wheel-enter"><img src="http://test.tucado.com/4play/_images/empty.png" width="100" height="100" /></div></a>

CSS:

    body{
    height:100%;
    width:100%;
    margin:0;padding:0;
    overflow:hidden;
}


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

#cdj2000 {
    position:fixed;
    top: 50%;
    left: 50%;
    width:700px;
    height:500px;
    margin-left: -350px; 
    margin-top: -250px; 
}

#wheel-enter {
    position:fixed;
    top: 50%;
    left: 50%;
    width:100px;
    height:100px;
    margin-top: -50px; 
    margin-left: -50px; 
}


img{
    border:none;
}

そしてjquery：

$(window).load(function() {    

    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(function() {
        resizeBg();
    }).trigger("resize");

});

ところで。何らかの理由でdivが機能しなかったため、空の画像をボタンとして配置する必要がありました。奇妙なこと。この div に境界線を追加すると、機能し始めましたが、アクションは境界線上のみでした...これは奇妙です。もちろん、クリックされる背景の一部として見えると思われる境界線は必要ありませんでした。

jsFiddle はこちら: >> jsFiddle <<

ご意見ありがとうございます。

4

3 に答える 3

1

これを使用するだけです：

var theWindow = $(window)

function resizeBg() {
    $("#bg").css('width', $('html').outerWidth());
    $("#bg").css('height', $('html').outerHeight());
}

theWindow.resize(function() {
    resizeBg();
}).trigger("resize");

アスペクト比を維持したい場合は、幅を変更する線を削除します。

ここにデモンストレーションがあります：http://jsfiddle.net/58MPb/3/

于 2012-11-23T10:39:45.967 に答える
1

何らかの理由で、JSfiddle は機能しませんが、テスト ページで機能する結果のコードを次に示します。

<style>
   body{
    height:100%;
    width:100%;
    margin:0;padding:0;
    overflow:hidden;
}


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

#cdj2000 {
    position:fixed;
    top: 50%;
    left: 50%;
    width:700px;
    height:500px;
    margin-left: -350px; 
    margin-top: -250px; 
}

#wheel-enter {
    position:fixed;
    top: 50%;
    left: 50%;
    width:100px;
    height:100px;
    margin-top: -50px; 
    margin-left: -50px; 
}


img{
    border:none;
}
</style>
<img src="http://test.tucado.com/4play/_images/cdj2000-start.jpg" id="bg" alt="">
    <a href="home.html"><div id="wheel-enter"><img src="http://test.tucado.com/4play/_images/empty.png" width="100" height="100" /></div></a>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script>
    $(window).load(function() {    

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

    function resizeBg() {
            $bg
                .removeClass()
                .addClass('bgheight').css('margin-left',$bg.width()/2*-1);
    }

    theWindow.resize(function() {
        resizeBg();
    });
    resizeBg();

});
</script>

理由もなくウィンドウのアスペクト比をテストしていました。何が起こってもウィンドウの高さの 100% が必要なので、この部分を削除しました。画像を中央に配置するには、負のマージンのトリックを使用して、ページの 50% に配置します。つまり、中央に配置します。次に、サイズ変更された画像の幅の半分に等しい負の倍率を適用します。

于 2012-11-23T10:40:30.693 に答える
0

私はそれを修正したと信じています：http://jsfiddle.net/jcolicchio/58MPb/4/

まず、JS の最初の行を次のように変更しました。

$(document).ready(function() {

コードをまったく実行していないように見えるためです。逆方向の不等号もありましたが、それもひっくり返しました。

if ( (theWindow.width() / theWindow.height()) > aspectRatio ) {

ここに投稿された他の解決策は、はるかにクリーンなコードですが、私にとってはちょっとぎくしゃくしています。

于 2012-11-23T10:42:14.220 に答える