// 用法 <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如何调整调整图片大小，裁剪代码实例详解的详细内容。