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