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

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

Javascript:

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

如果圖片較大,建議在圖片標簽里面同時設置期望的圖片大小,這樣不會導致頁面在加載中撐開,該大小不會影響最終縮放效果?梢孕薷纳厦娴拇a為: 

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

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

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

相關信息
服務指南

(*^▽^*)MG疯狂维京海盗如何爆大奖 内蒙古快3开奖结果50期 冠通游戏斗地主 广东快乐十分开奖结果 黑龙江36选7最新开奖结果 熊猫麻将怎么成为代理 黑龙江11远5开奖结果 悠洋棋牌捕鱼下载 宝马线上娱乐mg线路检测 河南快3走势图 排列5走势图500期 欢聚龙江泰来麻将官网 福彩3d走势图的技巧 山西快乐10分前三结果 沈阳棋牌斗地主 篮网五巨头 福彩生肖6十1开奖结果今天