三种使网站背景图片自动适应浏览器大小的方法 at ︻┳═一 [zsk.akaka.com.cn]

三种使网站背景图片自动适应浏览器大小的方法

9,416 Views 五月 22nd, 2008 by peterzsk

由于显示器分辨率的不同，相同的图片在不同分辨率下有可能会出现只显示一部分或留部分空白的情况，今天我们就来看看如何使网站背景图片自动适应浏览器大小。

这是最终的效果：What’s The Weather?

不管你怎么变化浏览器窗口大小，背景图始终会自动调节大小。

1 . 第一次方法：

我第一个想法是需要使用一个 css 背景图，如果这张图够大，就能填充整个屏幕。当浏览器窗口大小没有图片大时，它将自动隐藏多余的部分。

<head>
....
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.source-image").hide();
var $source = $("img.source-image").attr("src");
$('#page-body').css({
'backgroundImage': 'url(' + $source +')',
'backgroundRepeat': 'no-repeat',
'backgroundPosition': 'top center'
});
});
</script>
</head>
<body id="page-body">
<img class="source-image" src="images/image.jpg" alt="" />
</body>

上面的这些代码能够自动隐藏超出浏览器窗口部分的图片(image.jpg)多余部分，不会使浏览器产生滚动条。

这是第一次试验的效果

2 . 第二次方法：

第一次试验的效果并没有达到要求，并不是真的使得背景图片适应窗口大小，应该使用设置“宽度”和“高度”属性来控制图片的大小，如果我们能够得到浏览器窗口显示像素，就可以利用这个数字来控制图片大小，同时保持比例。

使用 jquery 和 dimensions plugin 可以获得这些参数。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $winwidth = $(window).width();
$("img.source-image").attr({
width: $winwidth
});
$(window).bind("resize", function(){
var $winwidth = $(window).width();
$("img.source-image").attr({
width: $winwidth
});
});
});
</script>

为了让这张图片更像一个背景图像，我们设置：

img.source-image {
position: absolute;
top: 0;
left: 0;
}

因为因为背景图片加上了定位代码，那要加在背景图片上任何东西都需要定位，如果您的背景图像是竖条状的（特别的高），而你的浏览窗口特别的宽，很容易造成背景图片高度超过您的浏览器窗口的高度，为了防止这种情况，需要设定对超出的部分进行隐藏：

body {
overflow: hidden;
}

3 . 第三次方法（最好的）：

Stu Nicholls version给出了最好的方法，这处理方式不需要任何的 JavaScript 就能完美的达到目的。

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

在 css 里直接设定背景图片宽度的百分比，这是这个方法的效果。这个方法是最好的，而且不需要任何的 JavaScript 。

原文：css-tricks.com
译者：peterzsk
译文原地址：http://zsk.akaka.com.cn/2008/05/how-to-resizeable-background-image/
采用CC创作共用协议,转载可保留以上信息并<署名、非商业和保持一致>。

如果您喜欢我的文章，可以订阅我的

谢谢。

看过本篇的朋友，还看过：

3 Responses to “三种使网站背景图片自动适应浏览器大小的方法”

1 一亿度

谢谢翻译，不知道支不支持firefox和opera

[回复]

Comment on May 22nd, 2008 at 12:38 pm
2匿名

怎么不能下载啊？？？

[回复]

Comment on Feb 24th, 2009 at 8:59 pm
3s.

thanks.

[回复]

Comment on Mar 7th, 2009 at 11:10 am

︻┳═一 [zsk.akaka.com.cn]