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

[JS]JS图片超过宽度当图片大于外层设置高度宽度自动缩小

时间:2014-09-09 09:07酷播
[JS]JS图片超过宽度当图片大于外层设置高度宽度自动缩小

<div id="tupian"><img alt="示例图片" width="1024" height="768" src="http://www.cuplayer.com/xxx.jpg" /></div>

  1. <script type="text/javascript" > 
  2. //cuplayer.com 缩放图片到合适大小 
  3.  
  4. function ResizeImages() 
  5.    var myimg,oldwidth,oldheight; 
  6.    var maxwidth=400;  //cuplayer.com 图片缩放后的宽度,可自行修改 
  7.    var maxheight=300;  //cuplayer.com 图片缩放后的高度,可自行修改 
  8.    var imgs = document.getElementById('tupian').getElementsByTagName('img');  //如果你定义的id不是tupian,请修改此处 
  9.  
  10.    for(i=0;i<imgs.length;i++){ 
  11.      myimg = imgs[i]; 
  12.  
  13.      if(myimg.width > myimg.height) 
  14.      { 
  15.          if(myimg.width > maxwidth) 
  16.          { 
  17.             oldwidth = myimg.width; 
  18.             myimgmyimg.height = myimg.height * (maxwidth/oldwidth); 
  19.             myimg.width = maxwidth
  20.          } 
  21.      }else{ 
  22.          if(myimg.height > maxheight) 
  23.          { 
  24.             oldheight = myimg.height; 
  25.             myimgmyimg.width = myimg.width * (maxheight/oldheight); 
  26.             myimg.height = maxheight
  27.          } 
  28.      } 
  29.    } 
  30. //cuplayer.com 缩放图片到自定义大小 
  31. ResizeImages(); 
  32. </script> 

上面那张图,因为在层tupian里,如果tupian设置的大小比img的小,那么,此时,img会按js里面的设置缩小。。

热门文章推荐

请稍候...

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

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