0

我在这里有这个网站：http: //jamessuske.com/freelance/seasons/

如果您在 iPhone 或 iPad 上垂直查看它，背景将结束。如果您水平查看它，它将覆盖整个屏幕。我的问题是，是否可以让背景图像垂直覆盖整个屏幕？

这是HTML：

<img src="images/index.png" id="bg" class="bgwidth">

CSS：

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

.bgwidth { 
    width: 100%; 
}

.bgheight { 
    height: 100%; 
}

和 jQuery：

<script type="text/javascript">
            $(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(resizeBg).trigger("resize");

            });
        </script>

任何人都可以帮忙吗？或者至少指出我正确的方向？

4

1 回答 1

1

我可能会远离使用 jquery 来做到这一点......尝试使用仅 CSS 的解决方案，例如......

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

来源：http : //css-tricks.com/perfect-full-page-background-image/

于 2013-07-22T22:29:35.500 回答