图片等比整屏缩放

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

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

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

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

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

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

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

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

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

 

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

 1         var vBox=document.getElementById("box");
        vBox.style.height=document.documentElement.clientHeight+'px';
        var sizes=[];
        sizes = box.getAttribute("data-size").split("|");
        sizes.push(sizes[0] / sizes[1]);
    
        var c = document.documentElement.clientWidth, d = document.documentElement.clientHeight;
        var h = {};
        
        if(c / d > sizes[2]){
            h.width = c;
            h.height = h.width / sizes[2];
            h.top = (d - h.height) / 2;
            h.left = 0;
        }else{
            h.height = d;
            h.width = h.height * sizes[2];
            h.top = 0;
            h.left = (c - h.width) / 2;
        }
        
        box.style.width = h.width+'px';
        box.style.height = h.height+'px';
        box.style.top = h.top + 'px';
        box.style.left = h.left + 'px';

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

ok,完事了。