背景圖像修復設備尺寸的PhoneGap

1.Load image fix size of image 

(function($) { 
    $.fn.fullBg = function() { 
     var bgImg = $(this); 
     function resizeImg() { 
      var imgwidth = bgImg.width(); 
      var imgheight = bgImg.height(); 

      var winwidth = $(window).width(); 
      var winheight = $(window).height(); 

      var widthratio = winwidth/imgwidth; 
      var heightratio = winheight/imgheight; 

      var widthdiff = heightratio * imgwidth; 
      var heightdiff = widthratio * imgheight; 

      if (heightdiff > winheight) { 
       bgImg.css({ 
        width : winwidth + 'px', 
        height : heightdiff + 'px' 
       }); 
      } else { 
       bgImg.css({ 
        width : widthdiff + 'px', 
        height : winheight + 'px' 
       }); 
      } 
     } 
     resizeImg(); 
     $(window).resize(function() { 
      resizeImg(); 
     }); 
    }; 
})(jQuery)

2.index.html背景圖像修復設備尺寸的PhoneGap

<script type="text/javascript" charset="utf-8" src="js/main.js"> 
      $(window).load(function() { 
       $("#background").fullBg(); 
      }); 
     </script> 
    </head> 
    <body> 
     <img src="img/main_bg.png" alt="" id="background" /> 
     <div id="maincontent"> 
      <!-- Your site content goes here --> 
     </div> 
    </body>

3和CSS文件看起來像這樣

fullBg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#maincontent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 50; 
}

此圖片滾動，使他們看到了一個白色的空間所有側

Getting image

what i want image look like this

在此先感謝freinds。歡迎每一個想法，謝謝。

來源

2013-03-21 QuokMoon

試試這個CSS背景屬性，希望它會幫助你....

你的身體背景DIV + CSS這個樣子的

<style type="text/css"> 
.backgroud { 
    background:url(image.jpg) repeat; 
    background-size: 100%; 
} 
</style>

HTML這個樣子

<body> 
    <div class="background"> 
     <div class="content"> -- Page Content --- </div> 
    </div> 
</body>

來源

2013-03-21 11:45:57 mans

有你曾經用適當的設備嘗試過這種手機，因爲這對任何人都不適用...！？！ – 2013-11-15 10:47:18

背景圖像修復設備尺寸的PhoneGap

回答

相關問題