背景圖片隨窗口大小改變自適應

效果參考

 

http://vip.163.com/

http://vip.sina.com.cn/

特點：背景圖片在不變形的情況下盡可能的顯示完整，窗口不出現滾動條，始終全屏顯示

JS：

#content代表最外層的DIV，使頁面全屏

.bg代表背景圖片

<img src="#" class="bg" />

 //此參數表示圖片縮放的比例，如果有需要定位在窗口某位置的圖片，可根據此變量改變該圖片的大小和坐標，使其在窗口大小改變的時候可以保持和背景固定的比例及位置，
var scale = 1; 
var bgMarginTop=150;
//計算比例值
var o = 圖片寬度/圖片高度;
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//設置窗口全屏
$("#content").css({"height":screenHeight,"width":screenWidth}) 
var a = screenWidth / screenHeight;
if (o > a ){
    scale = parseInt($(".bg").width())/1920;
    $(".bg").height(screenHeight+bgMarginTop*scale).width("");
    
    
}else if(o < a ) {
    scale = screenWidth/1920;
    $(".bg").width(screenWidth).height("");
    
}