js控制图片宽度

1、给图片限制一个最大宽度,如果图片宽度小于这个宽度,就显示图片原来的大小
如果超过这个宽度,就限制在一个固定质上,如下简单做法(js脚本)

<img src=imgpath οnlοad='javascript:if(this.width>200)this.width=200;'>

2、显示file表单里图片的宽度和高度,可以把如下代码存成网页形式,浏览一下效果。

代码开始:

<html>
<head>
<title>显示上传图像的大小</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>
<body>

<FORM name=form action="" method=post encType=multipart/form-data>
<INPUT onpropertychange=document.all.aaaa.src=this.value type=file name=upload><BR>
宽:<INPUT name=W> <br>
高:<INPUT name=H><BR>
<INPUT type=submit value=提交> 
<IMG  οnerrοr='alert("类型错误或者目标不存在");' οnlοad={document.all.W.value=this.width;document.all.H.value=this.height;} name=aaaa> </FORM>
</body>
</html>

3、按比例控制宽度和高度的函数:

function openimg(imgobj){
 imgobj.style.cursor="pointer";
 var thesrc=imgobj.src;
 if(IE){var f =new Function("event","window.open('"+thesrc+"')");imgobj.attachEvent("onclick",f);}
 else{imgobj.setAttribute("onclick","window.open('"+thesrc+"')")}
 }
function ResizeImg(obj,theWidth,theHeight){
 if(obj!=null){
  var imglist=obj.getElementsByTagName("img");
  if(imglist!=null){
   var a;
   for(a=0;a<imglist.length;a++){
    alert(imglist[a].width);
    if(imglist[a].width>theWidth){
     imglist[a].height=Math.round(imglist[a].height*(theWidth/imglist[a].width))
     imglist[a].width=theWidth;
     openimg(imglist[a]);
    }
    if(imglist[a].height>theHeight){
     imglist[a].width=Math.round(imglist[a].width*(theHeight/imglist[a].height))
     imglist[a].height=theHeight
     openimg(imglist[a]);
     }
    }
   }
  }
 }

转载于:https://www.cnblogs.com/xtsjh/archive/2012/02/21/2361602.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值