-2

このリンクのコードを使用していますhttp://css-tricks.com/perfect-full-page-background-image/

    <script>
        $(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');
                }

                $bg.style.marginTop = (-theWindow.height() / 2) + 'px';
                $bg.style.marginLeft = (-theWindow.width() / 2) + 'px';

              }

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

            });
    </script>
    <style>
    #bg { position: fixed; top: 0; left: 0; z-index:-2;}
    .bgwidth { width: 100%; }
    .bgheight { height: 100%; }
    </style>
    <body>
       <div id="caseStudies">
            <img src="images/caseStudy01.jpg" alt="Case Study 1" id="bg">
        </div>
</body>

しかし、背景画像を中央に配置したい。次のコードを使用してこれを試みました。

$bg.style.marginTop = (-theWindow.height() / 2) + 'px';
$bg.style.marginLeft = (-theWindow.width() / 2) + 'px';

これは機能していません。正しい値を参照していますか?

4

1 に答える 1

0

私はあなたがこれで試してみるべきだと思います：

    $bg.style.marginTop = ($bg.height()/2-theWindow.height() / 2) + 'px';
    $bg.style.marginLeft = ($bg.width()/2-theWindow.width() / 2) + 'px';
于 2013-01-30T10:51:32.340 に答える