iOS-網站上的iPhone CSS后台問題

Question

我在這里有這個網站： 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>

有人可以幫忙嗎？ 或至少指向我正確的方向？

Answer 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% */
  }
}

Src： http ： //css-tricks.com/perfect-full-page-background-image/