衡陽最好的網站建設公司
當前位置: 主頁 > 網站設計 >

JavaScript等比例縮放圖片

時間:2016-03-29 17:34來源:未知 作者:admin

js等比例縮放圖片,這個功能非常實用,當網頁加載一個尺寸比較大的圖片時,往往會把一個網頁撐的變形,頁面變得很難看,于是我們就想到了用JS去控制超出一定范圍的圖片,以穩定頁面布局,本代碼段就是完成了此功能,而且代碼非常簡潔,效果很好。



<html>
<head>
<title>等比例縮放圖片</title>
<script>
function DrawImage(ImgD,iwidth,iheight){    
    //參數(圖片,允許的寬度,允許的高度)    
    var image=new Image();    
    image.src=ImgD.src;    
    if(image.width>0 && image.height>0){    
      if(image.width/image.height>= iwidth/iheight){    
          if(image.width>iwidth){      
              ImgD.width=iwidth;    
              ImgD.height=(image.height*iwidth)/image.width;    
          }else{    
              ImgD.width=image.width;      
              ImgD.height=image.height;    
          }    
      }else{    
          if(image.height>iheight){      
              ImgD.height=iheight;    
              ImgD.width=(image.width*iheight)/image.height;            
          }else{    
              ImgD.width=image.width;      
              ImgD.height=image.height;    
          }    
      }    
    }    
}   
</script>
</head>
<body>
<img src="*.gif" alt="自動縮放后的效果" width="220" height="80" onload="javascript:DrawImage(this,100,100)" />
</body>
</html>
------分隔線----------------------------
推薦內容


© 2009-2013 www.666847.tw All Rights Reserved.
版權所有:衡陽圣矢網絡工作室 2009-2013
地址:衡陽市雁峰區雁城路
    (*^▽^*)MG狂野亚马逊免费下载 麻将外挂看牌软件 重庆时时彩娱乐平台 安徽快3投注技巧 陕西快乐10分开奖直播 吉祥棋牌游戏下载 下载免费东北麻将 街机捕鱼大富翁破解版 排列三常用走势图 福建体彩11选五走势图手机 天津快乐10分 481组选12中奖规则 金博棋牌2.5 扑克麻将牌玩法 白城手机打麻将 好彩1复式 三肖期期中特期期准房价一力