让图片适应屏幕而不会失去长宽比
设计思路:
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>