图片等比整屏缩放

都好长时间不写博客了，今天好不容易写了一下^_^

现在的网页越来越多的使用整屏幕的图片作为背景，但是针对分辨率的不同，到底怎样才能不失真不变形呢，参考别人的网站的做法和思路，总结如下：

1 首先图片要尽量的足够大，保证屏大时不失真

2 图片是有一个长宽比的，只有按照长宽等比缩小或放大，图片就不会变形

3 屏幕的长宽和图片的长宽比例不同时，要以大的一方为依据：以宽/高为例，

屏比例>图比例图宽 = 屏宽，计算图高

屏比例<图比例图高 = 屏高，计算图宽

4 为了使全屏都有图像，图片计算出来的如果大于屏幕高度，就向上移动以多出的一半（同样，计算出的宽大于屏幕，就向右移动多出来的一半）

 #box {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

1 <div id="box" data-size="1920|1080">
2      <img src="img/banner.jpg" style=" 100%;height: 100%;">
3 </div>

 1         var vBox=document.getElementById("box");
 2         vBox.style.height=document.documentElement.clientHeight+'px';
 3         var sizes=[];
 4         sizes = box.getAttribute("data-size").split("|");
 5         sizes.push(sizes[0] / sizes[1]);
 6     
 7         var c = document.documentElement.clientWidth, d = document.documentElement.clientHeight;
 8         var h = {};
 9         
10         if(c / d > sizes[2]){
11             h.width = c;
12             h.height = h.width / sizes[2];
13             h.top = (d - h.height) / 2;
14             h.left = 0;
15         }else{
16             h.height = d;
17             h.width = h.height * sizes[2];
18             h.top = 0;
19             h.left = (c - h.width) / 2;
20         }
21         
22         box.style.width = h.width+'px';
23         box.style.height = h.height+'px';
24         box.style.top = h.top + 'px';
25         box.style.left = h.left + 'px';

我解释的不是很清楚，欢迎大家提出意见。

ok,完事了。