让图片适应屏幕而不会失去长宽比

设计思路：

　　Image本身是有长宽的，拿到这个image之后我们先计算出这个比例，然后我们设定我们需要的宽度，计算出高度.

实现代码：

　　1.使用类名抓取要设置比例的图片，以便分类
　　2.图片不要带高宽属性，不要写css设置高宽，以便获取本身的高宽
　　3.函数要在onload之后执行，等待资源加载完才能获取

　　<div>
        <img class="con-img" src="http://www.sn.xinhua.org/2006-12/06/xin_2812031114439212185110.jpg"/>
        <img class="con-img" src="http://www.sn.xinhua.org/2006-12/06/xin_2812031114439212185110.jpg"/>
        <img class="con-img" src="http://www.sn.xinhua.org/2006-12/06/xin_2812031114439212185110.jpg"/>
    </div>
    
    <script>
        var resetImg=function(){
            var img=document.getElementsByClassName("con-img"),
                    screenWidth=document.body.clientWidth,
                    widthArr=[screenWidth/2,screenWidth/3,100];
            for(var i=0, l= img.length; i<l ; i++){
                var ratio=img[i].height/img[i].width;
                var height=widthArr[i]*ratio;
                img[i].width=widthArr[i];
                img[i].height=height;
            }
        };
        window.onload=resetImg;
        window.onresize=resetImg;
    </script>