1

だから私はサイトをプログラミングしていて、本文の背景画像は background-image:cover に設定されています。正常に動作しますが、問題が 1 つあります。私の背景画像は 1138px × 825px で、ブラウザ ウィンドウが 1138px × 825px より小さい場合は、そのサイズのままにしたいと考えています。画像が通常の背景画像のように機能し、縮小しないようにします。ブラウザーが 1138px × 825px より大きいサイズで開いている場合、CSS カバー機能を有効にしたいです。アイデアや解決策はありますか？よろしくお願いします。サイトとCSSコードは以下です。

サイト: test.baysidemarket.com

CSS コード:

#home{
background:url('imgs/back01.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 1000px;
height: 725px;

}

html:

<body id="home">
</body>
4

2 に答える 2

1

cssでそれを行う唯一の方法は

@media (min-width: 1138px) and (min-height: 828px){
// your code for larger display
}
于 2013-03-07T09:18:13.240 に答える
0

私はこれをテストしませんでしたが、これは論理的に機能するはずです：

'use strict';
$(document).ready(function(){
    var body_w = $('body').css('width').replace('px', '') * 1;
    var body_h = $('body').css('height').replace('px', '') * 1;
    console.log(body_w + 'x' + body_h);

    // Initial check
    if (body_w > 1138 && body_h > 825) {
        $('body').css({
            '-webkit-background-size' : 'cover',
            '-moz-background-size' : 'cover',
            '-o-background-size' : 'cover'
            'background-size' : 'cover'
        });
    }

    $(window).resize(function(){
        var body_w = $('body').css('width').replace('px', '') * 1;
        var body_h = $('body').css('height').replace('px', '') * 1;

        if (body_w > 1138 && body_h > 825) {
            $('body').css({
                '-webkit-background-size' : 'cover',
                '-moz-background-size' : 'cover',
                '-o-background-size' : 'cover'
                'background-size' : 'cover'
            });
        }
        else {
            $('body').css({
                '-webkit-background-size' : 'auto',
                '-moz-background-size' : 'auto',
                '-o-background-size' : 'auto'
                'background-size' : 'auto'
            });
        }
    });
});

使用するかどうかの初期チェックcoverを行い、ウィンドウのサイズが変更されたときに再度チェックします。

background-size最初のCSSはもう必要ないので、削除することを忘れないでください。

#home{
    background:url('imgs/back01.jpg') no-repeat top left fixed;
    width: 1000px;
    height: 725px;
}

注：可能であれば、jQueryをアップグレードしてみてください。1.7.2を使用しているようですが、1.9.xを使用してみてください

于 2013-03-07T09:13:13.263 に答える