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

阅读更多
换一批

没有更多推荐了,返回首页