固定网页背景图同时保持图片比例




提供一个背景图片策略:

1,背景图片固定

2,随窗口大小改变而改变大小

3,保持比例不变而缩放


支持浏览器:IE 6,7,8,9+ ,FF,Chrome


演示地址:http://www.einino.net/bg_image.html


<style>
body{margin:0; padding:0;height:2000px; }
#background_img{
	top:expression(documentElement.scrollTop); /*we need this expression to fixed the top*/
}
</style>


/**
 *@desc make a fixed background image. resize the image to fit the window size besides do not lost the image's proportion
 *@author EI Nino
 *2013/8/15
 */
var imgBackground=function(_img_obj)
{
	this.img = _img_obj;
	this.init();
}
imgBackground.prototype={
	init:function(){
		this.img.style.top="0";
		this.img.style.left="0";
		if(navigator.appVersion.indexOf('MSIE 6.0')>0){
			this.img.style.position="absolute";
			this.img.style.bottom="auto";
			if(!document.body.style.backgroundImage){//esacpe the flash when scroll the window in IE 6
				document.body.style.backgroundImage="url(about:blank)";
				document.body.style.backgroundAttachment="fixed";
			}
		}
		else{
			this.img.style.position="fixed";
		}
		this.ra = this.img.width/this.img.height;
		this.resize();
		this.BindEvent();
	},
	resize:function() {
		var self=this;
		if((document.documentElement.clientWidth /document.documentElement.clientHeight )>=self.ra)
		{
			self.img.style.width=document.documentElement.clientWidth+"px";
			self.img.style.height="";
		}
		else{
			self.img.style.width="";
			self.img.style.height=document.documentElement.clientHeight +"px";
		}
	},
	GetStyle:function(_obj,_style){
		var obj = _obj;
		return obj.currentStyle? obj.currentStyle[_style] :window.getComputedStyle(obj, null)[_style];
	},
	BindEvent:function(){
		var self = this;
		$(window).resize(function(){//use jquery lib
			self.resize();
		});
	}
};
new imgBackground(document.getElementById("background_img"));


原文地址:https://www.cnblogs.com/james1207/p/3260702.html