拾贝电台是一个收集了众多优秀电台资源的广播频道聚合器，其功能模块较少，无非播放控制和播放列表等几个窗口。为了不至于留下太多的空白区域影响整体美观，设置了可拉伸的背景图片。这里把实现该效果的代码贴出:

用jQuery实现背景拉伸，自适应窗口的调整而改变大小。该段代码应该放在网页内容之前，最好是紧跟在<body>之后，这样可以避免页面加载时出现太突兀的情景。

JavaScript计算客户端浏览器窗口尺寸比较简单。第一个模块的代码做一些初步的计算，判断图像比例，浏览器宽度。

再使用jQuery来操作相应节点的CSS规则改变图片显示，以保持图像的的比例不变 适应浏览器窗口的调整。

JavaScript代码：

$(document).ready(function() {

var bgImage = $(‘#background-image’);

function resizeImg() {
var imgwidth = bgImage.width(),
imgheight = bgImage.height(),
winwidth = $(window).width(),
winheight = $(window).height(),
widthratio = winwidth / imgwidth,
heightratio = winheight / imgheight,
widthdiff = heightratio * imgwidth,
heightdiff = widthratio * imgheight;

if(heightdiff>winheight) {
bgImage.css({
width: winwidth+’px’,
height: heightdiff+’px’
});
} else {
bgImage.css({
width: widthdiff+’px’,
height: winheight+’px’
});
}

$(“#background-image”).show();

}
resizeImg();
$(window).resize(function() {
resizeImg();
});

});

CSS代码：

#background-image{
position:absolute; //配合z-index使背景图片显示在网页内容下方
top:0;
left:0;
z-index:-10;
overflow: hidden;
width: 100%;
display:none; //未开启JavaScript的浏览器将不会显示背景图片
}

演示：

http://radio.sbboy.com/ 打开后可以取消最大化，拖动修改窗口尺寸 则页面的背景图片也会随之变化。