關于我們聯系我們網站地圖版權聲明收藏本站
JavaScript實現網頁圖片等比例縮放效果
//www.wsjcw.com    2009-01-01    網站建設    我要評論(0)

在處理網頁圖片時,特別是一些圖片列表的應用里面,很難保證圖片統一大小,直接設置圖片大小又會導致圖片拉伸,造成圖片模糊,本文介紹的代碼可以在圖片加載完成后自動按比例調整圖片大小。

Javascript:

<script language="javascript" type="text/javascript"> 
<!-- 
// 說明:用 JavaScript 實現網頁圖片等比例縮放 
// 整理://www.CodeBit.cn 
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>

調用方式:

<ccid_file values="1148202890" alt="自動縮放后的效果"
onload="javascript:DrawImage(this,200,200);" / />

如果圖片較大,建議在圖片標簽里面同時設置期望的圖片大小,這樣不會導致頁面在加載中撐開,該大小不會影響最終縮放效果??梢孕薷納廈嫻拇胛?nbsp;

<ccid_file values="1148202890" alt="自動縮放后的效果"
width="200" height="200" onload="javascript:DrawImage(this,200,200);" / />
來源:海南工商注冊代理網  相關專題:網站建設  閱讀:
已經是第一篇了 | 新一篇:[合法避稅咨詢]企業合理避稅案例分析
文章評論信息

已經有0人評論該文章! 查看所有評論

這里是評論的動作,做發表評論的錄入框

相關信息
服務指南

188nba蓝球比分直播

{ganrao} pk10开奖视频 河南快3多少期 黑龙江省快乐10分开奖结果 好运快3给你5000 胜分差 丹麦世界杯比分预测 北京pk赛车开奖结果 最近股票大盘走势 做互联网金融挣钱吗 35选7网上怎么买 富贵互娱棋牌官网 辉煌棋牌最新手机版下载 中原河南麻将手机版下载 体彩老十一选五 轮回排列三预测 北京小赛车技巧