背景： 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