So ändern Sie die Größe von Bildern mit Javascript, ausführliche Erläuterung der Codebeispiele zum Zuschneiden

Größe des Bildes ändern, ohne die Form zu verlieren (FF IE-kompatibel)

// 用法 <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;
  }
  }
 }
 }

Durch Überlauf ausschneiden: versteckt:

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

Beispiel:

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

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Größe von Bildern mit Javascript, ausführliche Erläuterung der Codebeispiele zum Zuschneiden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!