·您当前的位置:首页 > 技术教程 > JavaScript >

[js]js控制图片尺寸的宽高比例源代码

时间:2014-07-11 08:19酷播
js控制图片宽高比例 js控制图片尺寸防止撑破页面布局.防止过大图片撑破页面.代码中的 650 表示最大宽度,根据自己情况适当修改;article_content 表示图片外层容器的Id,需要你修改为自己的.兼容各浏览器,最主要的是不跟其他js库冲突,放上去就能用.
  1. <script type="text/javascript">   
  2. function ImgZoom(Id)   
  3. {   
  4.     var w = Id.width;   
  5.     var m = 650;   
  6.     if(w < m)   
  7.     {   
  8.         return;   
  9.     }   
  10.     else   
  11.     {   
  12.         var h = Id.height;   
  13.         Id.height = parseInt(h*m/w);   
  14.         Id.width = m;   
  15.     }   
  16. }   
  17. void function(){   
  18.     var Imgs = document.getElementById("article_content").getElementsByTagName("img");   
  19.     for(i=0;i<Imgs.length;i++)   
  20.     {   
  21.         ImgZoom(Imgs[i]);   
  22.     }   
  23. }();   
  24. </script>   

 js控制图片宽高比例 js控制图片尺寸防止撑破页面布局.防止过大图片撑破页面.
代码中的 650 表示最大宽度,根据自己情况适当修改;article_content 表示图片外层容器的Id,需要你修改为自己的.兼容各浏览器,最主要的是不跟其他js库冲突,放上去就能用.

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器