關于我們聯系我們網站地圖版權聲明收藏本站
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} 皇冠比分网即时比分188 福建36选7胆拖投注 河北快三 上海麻将百搭技巧 陕西快乐10分开奖 重庆幸运农场精准计划 詹天佑3d预测号 足球比分捷报比分直播手机版 贵州十一选五投注技巧 排列5霸主破解软件 江苏十一选五开奖公 股票配资平台哪个好 欧洲篮球即时比分 内蒙古十一选五的玩法 18选7开奖结果 重庆欢乐生肖五星组选走势图