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

设计思路:

  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>

 

 

 

posted @ 2013-08-05 11:18  x.radish  阅读(1115)  评论(0编辑  收藏  举报