js背景圖片按比例充滿全屏

背景：

Chrome中頁面背景圖片：background-size:cover;可以按比例放大圖片而無損畫質。

問題是實際在pc端測試時不知何故，圖片只能顯示原大小，其他設置無法按比例放大。

如果設置：background-size:100% 100%;只是拉伸圖片，使之充滿全屏，有損畫質。

那麼如何讓圖片充滿全屏，又對背景圖片畫質無損呢？

解決：

設置兩個函數

1.$(document).ready(function(){});頁面加載時調用

2.$(document).ready(function(){});頁面寬高變化調用

3.兩個函數中：

    <1>獲取背景圖片寬高比

    <2>獲取屏幕寬高比

    <3>如果<1>大於<2>，設置background-size,auto 100% （高度爲100%）

           否則設置background-size,auto 100%（寬度爲100%）

代碼：

//屏幕變化時重置輸入框寬度

window.onresize = function(){
var widthoftextarea = $(window).width();
//設置背景圖大小按比例擴大
var width_screen = $(window).width();
var height_screen = $(window).width();
var wh = width_screen / height_screen;
var bgurl = 1.6;//背景圖寬高比
if (bgurl > wh)
{
$(“body”).css(“background-size”,”auto 100%”);
}
else {
$(“body”).css(“background-size”,”100% auto”);
}
}

$(document).ready(function(){
//設置背景圖大小按比例擴大
var width_screen = $(window).width();
var height_screen = $(window).width();
var wh = width_screen / height_screen;
var bgurl = 1.6;//背景圖寬高比
if (bgurl > wh)
{
$(“body”).css(“background-size”,”auto 100%”);
}
else {
$(“body”).css(“background-size”,”100% auto”);
}

});

原載於本人的個人空間：http://1.flyingdream.sinaapp.com/?p=27