關于我們聯系我們網站地圖版權聲明收藏本站
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} 上海天天彩选4历史 快中彩直播 电子天天捕鱼平台 五分彩计划软件下载 心悦吉林麻将安卓下载安装 大庆52麻将怎么知道宝 大发快三骗局揭秘 北京11选5遗漏走势图 华东六省15开奖结果 广东南粤风采最新3 盘后股票推荐骗术 球探比分篮球即时比分 湖南幸运赛车近1000期 麻将游戏单机破解版 台湾麻将技巧 广西快三今天的推荐号码