码迷,mamicode.com
首页 > 其他好文 > 详细

背景图片随窗口大小改变自适应

时间:2015-02-11 18:10:05      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:

效果参考

 

http://vip.163.com/

http://vip.sina.com.cn/

特点:背景图片在不变形的情况下尽可能的显示完整,窗口不出现滚动条,始终全屏显示

JS:

#content代表最外层的DIV,使页面全屏

.bg代表背景图片

<img src="#" class="bg" />

 //此参数表示图片缩放的比例,如果有需要定位在窗口某位置的图片,可根据此变量改变该图片的大小和坐标,使其在窗口大小改变的时候可以保持和背景固定的比例及位置,
var scale = 1; 
var bgMarginTop=150;
//计算比例值
var o = 图片宽度/图片高度;
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//设置窗口全屏
$("#content").css({"height":screenHeight,"width":screenWidth}) 
var a = screenWidth / screenHeight;
if (o > a ){
    scale = parseInt($(".bg").width())/1920;
    $(".bg").height(screenHeight+bgMarginTop*scale).width("");
    
    
}else if(o < a ) {
    scale = screenWidth/1920;
    $(".bg").width(screenWidth).height("");
    
}

 

背景图片随窗口大小改变自适应

标签:

原文地址:http://www.cnblogs.com/liqingchang/p/4286574.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!