标签：
主要是实现类似百度首页的皮肤，改变浏览器窗口大小，图片按照比例缩放，不变形的效果。
1. html部分
<!-- 背景图片-begin -->
<div class="login-bg">
<img src="images/bg.png" id="login_bg" />
</div>
<!-- 背景图片-end -->
<!-- 用空白的图片来挡住大图片-begin -->
<div class="login-bg-blank"></div>
<!-- 用空白的图片来挡住大图片-end -->
2. css的部分
.login-bg {
position:absolute;
top:0px;
left:0px;
margin:0px auto;
overflow:hidden;
z-index:-2;
width:100%;
height:100%;
}
.login-bg img {
width: 100%;
}
.login-bg-blank {
position:absolute;
top:0px;
left:0px;
overflow:hidden;
margin:0px auto;
width:100%;
height:100%;
background:url("../images/blank.gif");
}
3. js的部分
// 改变背景图片的宽高比
function resizeImg() {
// 该图片的宽高比
var scale = 1280 / 800;
var w = $(window).width(),
h = $(window).height();
if(w / h > scale){
$("#login_bg").css({width: ‘100%‘, height: ‘auto‘});
} else {
$("#login_bg").css({width: ‘auto‘, height: ‘100%‘});
}
};
关于实现页面以一张图片为背景，且背景不变形的效果
标签：
原文地址：http://www.cnblogs.com/pijiaxiang/p/4474907.html
