很多网站是全背景图片的，而且适应各种主流分辨率，给人一种干净大气的感觉，实属设计派的一个耍酷良方，下面介绍几种实现全屏图片自适应缩放背景图片的方法。
1.帅气简单的CSS3方法

1. html {

2. background: url(images/bg.jpg) no-repeat center center fixed;

3. -webkit-background-size: cover;

4. -moz-background-size: cover;

5. -o-background-size: cover;

6. background-size: cover;

7. }

复制代码

• Safari 3+

• Chrome Whatever+

• IE 9+

• Opera 10+

• Firefox 3.6+

2.只使用CSS之方法一

1. img.bg {

2. min-height: 100%;

3. min-width: 1024px;

4. width: 100%;

5. height: auto;

6. position: fixed;

7. top: 0;

8. left: 0;

9. }

11. @media screen and (max-width: 1024px) {

12. img.bg {

13. left: 50%;

14. margin-left: -512px;

15. }

16. }

复制代码

• 以下浏览器的任何版本: Safari / Chrome / Opera / Firefox

• IE 6: （各种方案奈我何？！）

• IE 7/8: 大部分工作，小屏幕的时候全屏，但是不是居中

• IE 9: 没问题

3.只使用CSS之方法二

1. 复制代码

2. #bg {

3. position:fixed;

4. top:-50%;

5. left:-50%;

6. width:200%;

7. height:200%;

8. }

9. #bg img {

10. position:absolute;

11. top:0;

12. left:0;

13. right:0;

14. bottom:0;

15. margin:auto;

16. min-width:50%;

17. min-height:50%;

18. }

复制代码

• Safari / Chrome / Firefox

• IE 8+

• Opera

4.jQuery方法

复制代码

1. #bg { position: fixed; top: 0; left: 0; }

2. .bgwidth { width: 100%; }

3. .bgheight { height: 100%; }

复制代码

1. $(window).load(function() {

2. var theWindow = $(window),

3. $bg = $("#bg"),

4. aspectRatio = $bg.width()/$bg.height();

6. function resizeBg() {

7. if ( (theWindow.width()/theWindow.height()) $bg

8. .removeClass()

9. .addClass('bgheight');

10. }else{

11. $bg

12. .removeClass()

13. .addClass('bgwidth');

14. }

15. }

16. theWindow.resize(function() {

17. resizeBg();

18. }).trigger("resize");

19. });

复制代码

• IE7+

• 任何除了IE的浏览器的任何版本