时间:2021-07-01 10:21:17 帮助过:3人阅读
// 用法 <img src="this_image_path.jpg" onload="DrawImage(this,450,450);" /> function DrawImage(ImgD,FitWidth,FitHeight){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ if(image.width/image.height>= FitWidth/FitHeight){ if(image.width>FitWidth){ ImgD.width=FitWidth; ImgD.height=(image.height*FitWidth)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } } else{ if(image.height>FitHeight){ ImgD.height=FitHeight; ImgD.width=(image.width*FitHeight)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } } } }
通过 overflow:hidden进行剪切:
function clipImage(o, w, h){ var img = new Image(); img.src = o.src; if(img.width >0 && img.height>0) { if(img.width/img.height >= w/h) { if(img.width > w) { o.width = (img.width*h)/img.height; o.height = h; //o.setAttribute("style", "marginLeft:-" + ((o.width-w)/2).toString() + "px"); $(o).css("margin-left", "-"+((o.width-w)/2).toString() + "px"); } else { o.width = img.width; o.height = img.height; } } else { if(img.height > h) { o.height = (img.height*w)/img.width; o.width = w; //o.setAttribute("style", "margin-top:-" + ((o.height-h)/2).toString() + "px"); //$(o).css("style", "margin-top:-" + ((o.height-h)/2).toString() + "px"); $(o).css("margin-top", "-"+((o.height-h)/2).toString() + "px"); } else { o.width = img.width; o.height = img.height; } } } }
实例:
<style type="text/css"> ul{list-style:none;} ul li{float:left;padding:1px;border:#ccc 1px solid;width:120px;height:120px;overflow:hidden;text-align:center;over-flow:hidden;} </style> <ul> <li><img src="1.jpg" onload="DrawImage(this,120,120);" /></li> <li><img src="2.jpg" onload="clipImage(this,120,120);" /></li> </ul>
以上就是javascript如何调整调整图片大小,裁剪代码实例详解的详细内容,更多请关注Gxl网其它相关文章!