一个背景图片自适应窗口的方法

为一个网页做一个大背景，需要考虑到如何让这个大背景图片能够按正常比例展示在用户面前。今天介绍一下我的一个想法和实践。

在做背景图片自适应窗口之前，我们需要先获取图片的尺寸和浏览器窗口的尺寸。通过 Javascript 可以这样获取：

var cw, ch, iw, ih, img;
cw = $(window).width();
ch = $(window).height();
img = new Image();
// url 是你的图片地址
img.src = url;
img.onload = function() {
    iw = img.width;
    ih = img.height;
}

接下来再对图片和窗口的比例做比较。如果窗口的比例大于图片的窗口，则以窗口的宽度作为图片的宽度，再计算出图片的高度，减去窗口的高度除以 2，作为图片的绝对定位的值。

从上面的图片解释中，我们可以这样来写代码：

if( cw / ch >= iw / ih ) {
    var new_h = parseInt(cw / iw * ih, 10);
    var imgTop = parseInt((ch - new_h) / 2, 10);
    // 假设图片的 id 为 J-img
    $("#J-img").css({
        "width" : cw + "px",
        "height" : new_h + "px",
        "top" : imgTop + "px",
        "left" : ""
    });
}

如果窗口的比例小于图片的比例，则以窗口的高度作为图片的高度，再计算出图片的宽度，减去窗口的宽度除以 2 ，作为图片的绝对定位的值。

if( cw / ch < iw / ih ) {
    var new_w = parseInt(ch / ih * iw, 10);
    var imgLeft = parseInt((cw - new_w) / 2, 10);
    // 假设图片的 id 为 J-img
    $("#J-img").css({
        "width" : new_w + "px",
        "height" : ch + "px",
        "top" : "",
        "left" : imgLeft + "px"
    });
}

除了上面的 Javascript 功能之外，还需要对应的样式控制：

body {
    position: relative;
    overflow: hidden;
}
#J-img {
    position: absolute;
}

恩，大概就是这样。算是最近的一篇水文总结吧。

掌心

一个背景图片自适应窗口的方法