简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 三种方法让网站背景自动适应各浏览器大小
Blogger Information
Blog 16
fans 0
comment 0
visits 18177
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
三种方法让网站背景自动适应各浏览器大小
忧郁之子的博客
Original
1650 people have browsed it

由于显示器分辨率的不同，相同的背景图片在不同分辨率下有可能会出现只显示一部分或留部分空白的情况。
实现效果：不管你怎么变化浏览器窗口大小，背景图始终会自动调节大小。

  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 。

 

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！