宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置: > 个人博客 > javascript

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

2016-10-13 00:16:48 点击量:54 标签: 收藏本文

<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里面的设置缩小。。

ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址:湖北省宜昌市伍家岗区东站二路6号三峡(宜昌)大数据产业园海洋馆二楼A203室