zoukankan      html  css  js  c++  java
  • 按比例缩放图片,JavaScript代码

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>按比例缩放图片</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    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;
               }
           }
       }
    }
    //-->
    </script>
    </head>
    <body>
    以下为原始图大小:
    <p><img src="http://www.codefans.net/jscss/demoimg/wall7.jpg" /></p>按比例缩小:
    <p><img src="http://www.codefans.net/jscss/demoimg/wall7.jpg" onload="DrawImage(this,100,100)" border="0"></a>
    </p>按比例放大:(实际上不能放大,只是显示图片的最原始尺寸)
    <p><img src="http://www.codefans.net/jscss/demoimg/wall7.jpg" onload="DrawImage(this,500,500)" border="0"></a>
    </p>
    </body>
    </html>

  • 相关阅读:
    货币系统
    纸牌
    活动
    KKT-黑白球
    POJ2676-Sudoku
    POJ1717-Dominoes
    POJ1088-滑雪
    POJ1862-Stripies
    POJ2531-Network Saboteur
    2019.12.13 数的划分
  • 原文地址:https://www.cnblogs.com/hateyoucode/p/1659118.html
Copyright © 2011-2022 走看看