iOS版 - 網站上

iPhone CSS背景問題，我有這個網站在這裏：http://jamessuske.com/freelance/seasons/iOS版 - 網站上

，如果你認爲它在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>

誰能幫助？或者至少指向正確的方向？

來源

2013-07-22 user2499454

我可能會從使用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-22 22:29:35 feitla

iOS版 - 網站上

回答

相關問題