zoukankan      html  css  js  c++  java

  • 利用javascript实现图片等比例缩放

    关键字: 图片等比例缩放, javascript
    下面方法可以实现等比例缩放：
    1． 把Image的Width和Height属性删除。
    2.　把下面js代码复制在Image后面（注意：这里假设你的Image名称叫“Image1”如果不同请把它改过来，图片按等比例缩放成200×200）。
    Js代码
    1. <script language="javascript" type="text/javascript">    
    2. function DrawImage()    
    3. {    
    4.     var FitWidth = 200,FitHeight = 200;   
    5.     var ImgD = document.getElementById('Image1');   
    6.     var image = new Image();   
    7.     image.src=ImgD.src;   
    8.     if(image.width>0 && image.height>0)    
    9.     {    
    10.         if(image.width/image.height>= FitWidth/FitHeight)    
    11.         {    
    12.             if(image.width>FitWidth)    
    13.             {    
    14.                 ImgD.width=FitWidth;    
    15.                 ImgD.height=(image.height*FitWidth)/image.width;    
    16.             }    
    17.             else    
    18.             {    
    19.                 ImgD.width=image.width;    
    20.                 ImgD.height=image.height;    
    21.             }    
    22.         }    
    23.         else    
    24.         {    
    25.             if(image.height>FitHeight)    
    26.             {    
    27.                 ImgD.height=FitHeight;    
    28.                 ImgD.width=(image.width*FitHeight)/image.height;    
    29.             }    
    30.             else    
    31.             {    
    32.                 ImgD.width=image.width;    
    33.                 ImgD.height=image.height;    
    34.             }    
    35.         }    
    36.     }    
    37. }    
    38.   
    39. DrawImage();   
    40. </script>  

    整个网页的源码如下：
    Html代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    5. <title>图片等比例绽放</title>  
    6. </head>  
    7. <body>  
    8. <img src="Spring.jpg" id="Image1"/>  
    9. </body>  
    10. </html>  
    11. <script language="javascript" type="text/javascript">    
    12. function DrawImage()    
    13. {    
    14.     var FitWidth = 200,FitHeight = 200;   
    15.     var ImgD = document.getElementById('Image1');   
    16.     var image = new Image();   
    17.     image.src=ImgD.src;   
    18.     if(image.width>0 && image.height>0)    
    19.     {    
    20.         if(image.width/image.height>= FitWidth/FitHeight)    
    21.         {    
    22.             if(image.width>FitWidth)    
    23.             {    
    24.                 ImgD.width=FitWidth;    
    25.                 ImgD.height=(image.height*FitWidth)/image.width;    
    26.             }    
    27.             else    
    28.             {    
    29.                 ImgD.width=image.width;    
    30.                 ImgD.height=image.height;    
    31.             }    
    32.         }    
    33.         else    
    34.         {    
    35.             if(image.height>FitHeight)    
    36.             {    
    37.                 ImgD.height=FitHeight;    
    38.                 ImgD.width=(image.width*FitHeight)/image.height;    
    39.             }    
    40.             else    
    41.             {    
    42.                 ImgD.width=image.width;    
    43.                 ImgD.height=image.height;    
    44.             }    
    45.         }    
    46.     }    
    47. }    
    48.   
    49. DrawImage();   
    50. </script>  
  • 相关阅读:
    mysql in 的另一种替换方法
    js 的一些总结
    医院收费系统 一点的简单总结
    物流系统
    mysqldump备份还原和mysqldump导入导出语句大全详解
    android 环境待建遇到的问题
    EXT CheckboxSelectionModel 多选效果
    Ext Grid动态生成Column的实现方式
    Javascript对象继承(原型继承法)
    ExtJS中grid的JsonStore、Ext.PagingToolbar带条件查询问题
  • 原文地址：https://www.cnblogs.com/zwq194/p/1352048.html
Copyright © 2011-2022 走看看