前几天无意将QQ空间账号退出，不经意中看到它的的首页样子，说真的，整体看起来真漂亮。后又在无意中缩放浏览器大小，看到它的背景图片会随着窗体大小和形状做出不同的缩变，而且没有一点给人不自然的感觉，这给我这种前端菜鸟看来真是强大啊，所以，菜鸟也想做一个这样东西。代码
首先，html是这样写的
<body style="overflow: hidden; "> <div id="lay_bg" style="left: 0; position: absolute; top: 0; background-color:#ECFED3;"> <img id="img" src="http://qzs.qq.com/qzone/v6/v6_config/upload/7a082c0dde36eac2205a088397aaf295.jpg" style=" position: absolute;" /> </div> </body>
一个div和img，太简单了，不解释了，还有，body中要设置overflow，默认会出现滚动条哦，
当然，重要是js
var cws,chs; window.onload=function(){ resizeBackground(); }; window.onresize = function () { resizeBackground(); }; dom = { getById: function (id) { return document.getElementById(id); }, getClientHeight: function () { return document.documentElement.clientHeight; }, getClientWidth: function () { return document.documentElement.clientWidth; } }; var $ = dom.getById; var resizeBackground= function () { var bg = $('lay_bg'), bg_img = $('img'), cws=cw=dom.getClientWidth()<=cws ? dom.getClientWidth() : dom.getClientWidth(); chs=ch = dom.getClientHeight()<=chs ? dom.getClientHeight() : dom.getClientHeight(); iw = bg_img.width, //图片width ih = bg_img.height; //图片height bg.style.width = cw + "px"; bg.style.height = ch + "px"; if (cw / ch > iw / ih) { var new_h = cw * ih / iw, imgTop = (ch - new_h) / 2; bg_img.style.width = cw + "px"; bg_img.style.height = new_h + "px"; bg_img.style.top = imgTop + "px"; bg_img.style.left = ""; } else { var new_w = ch * iw / ih, imgLeft = (cw - new_w) / 2; bg_img.style.width = new_w + "px"; bg_img.style.height = ch + "px"; bg_img.style.left = imgLeft + "px"; bg_img.style.top = ""; } }
这里用到的核心就是通过获得当前窗体的大小，来调整div大小，同时要兼顾图片形状的比例适当调节图片在div中的位置，
你知道的，首先是窗体改变，当client.width/cilent.height的比例大于图片的img.width/img.heigth,这样意味我们在横向缩小窗体，同时图片也是横向缩小，但是如果图片top不改变的和，图片不就变形了吗，所以此时要改变图片的top位置了，而这种算法是：client.width*img.height/client.height,同时我们又要考虑到图片要看起来效果往上下两个方向移动，所以我们把img的top位置在之前的结果上再/2,也就是一半即可。同理当缩小窗体上下的大小时img 的left的属性算法是：(client.height*img.width/client.width)/2。
嗯，如此这般，这般如此，搞定也。进过多中浏览器简单测试，几乎不存在浏览器兼容问题造成bug，