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