js php裁剪代码,javascript如何调整调整图片大小，裁剪代码实例详解

调整图片大小，不走形(FF IE 兼容)// 用法

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;

}

}

}

}

实例：

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;}

• 
•