2013-03-21 1 views
0
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

Заранее благодарим за внимание. Любые идеи приветствуются.

ответ

1

попробовать этот 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> 
+0

Вы когда-либо пробовал это в телефонном разрыве с надлежащим устройством, потому что это никогда не работает ни для кого ...!?! –