网页图片自适应的三种处理方法

本文总结了三种网页图片自适应处理方法,具体解决办法如下:

第一种方法:

  1. <img src="01.gif"  width="100" onload="drawImage(this,100,70)" /> 
  2.  
  3. function drawImage(ImgD,ImgDWidth,ImgDHeight){ 
  4.     var image=new Image(); 
  5.     image.src=ImgD.src; 
  6.     if(image.width/image.height>=ImgDWidth/ImgDHeight){ 
  7.         if(image.width>ImgDWidth){ 
  8.             ImgD.width=ImgDWidth
  9.             ImgD.height=(image.height*ImgDWidth)/image.width; 
  10.         } 
  11.         else{ 
  12.             ImgD.width=image.width; 
  13.             ImgD.height=image.height; 
  14.         } 
  15.     } 
  16.     else{ 
  17.         if(image.height>ImgDHeight){ 
  18.             ImgD.width=(image.width*ImgDHeight)/image.height; 
  19.             ImgD.height=ImgDHeight
  20.         } 
  21.         else{ 
  22.             ImgD.width=image.width; 
  23.             ImgD.height=image.height; 
  24.         } 
  25.     } 

第二种方法:

  1. <img src="http://tech.cncms.com/tech/UploadPic/2011618/2011618143434260.jpg" border="0" onload="return imgzoom(this,550);" style="cursor:pointer;" onclick="javascript:window.open(this.src);" /> 
  2.  
  3. <script language="javascript"> 
  4. //图片自动调整的模式,1为按比例调整 ,2 按大小调整。 
  5. var resizemode=1 
  6. function imgresize(o){ 
  7.     if(resizemode==2 || o.onmousewheel){ 
  8.         if(o.width > 500 ){ 
  9.             o.style.width='500px'
  10.         } 
  11.         if(o.height > 800){ 
  12.             o.style.height='800px'
  13.         } 
  14.     }else{ 
  15.         var parentNode=o.parentNode.parentNode; 
  16.         if(parentNode){ 
  17.             if(o.offsetWidth>=parentNode.offsetWidth){ 
  18.                 o.style.width='98%'
  19.             } 
  20.         }else{ 
  21.             var parentNode=o.parentNode 
  22.             if(parentNode){ 
  23.                 if(o.offsetWidth>=parentNode.offsetWidth){ 
  24.                     o.style.width='98%'
  25.                 } 
  26.             } 
  27.         } 
  28.     } 
  29. </script> 

 第三种办法(Jquery解决的),关键代码如下:

  1. $('#ac_content img').each(function(){ 
  2.     appropriate_width=300; 
  3.     if($(this).width()>appropriate_width){ 
  4.         $(this).css({'width':appropriate_width+'px','height':$(this).height()*appropriate_width/$(this).width()+'px'}); 
  5.         $(this).attr('title','点击查看大图片'); 
  6.         $(this).bind({ 
  7.             click:function(){ 
  8.                 window.open($(this).attr('src')); 
  9.             } 
  10.         }); 
  11.     } 
  12. }); 

转载请注明:代码家园 » 网页图片自适应的三种处理方法

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)