关于实现页面以一张图片为背景，且背景不变形的效果

主要是实现类似百度首页的皮肤，改变浏览器窗口大小，图片按照比例缩放，不变形的效果。

1. html部分

<!-- 背景图片-begin -->

    <div class="login-bg">

        <img src="images/bg.png" id="login_bg" alt=""/>

    </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;

 　　100%;

 　　height:100%;

}

 

.login-bg img {

 　　 100%;

}

 

.login-bg-blank {

 　　position:absolute;

 　　top:0px;

 　　left:0px;

 　　overflow:hidden;

 　　margin:0px auto;

 　　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({ '100%', height: 'auto'});

    } else {

        $("#login_bg").css({ 'auto', height: '100%'});

    }

};