广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

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

    2018-04-03 22:12:36 次阅读 稿源:互联网
    零七广告

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

    第一种方法:

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

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告