JavaScript實現(xiàn)網(wǎng)頁圖片等比例縮放實現(xiàn)代碼及調用方式
更新時間：2013年02月25日 14:07:11 作者：
為了保證圖片統(tǒng)一大小，直接設置圖片大小又會導致圖片拉伸,造成圖片模糊，接下來將介紹的代碼可以在圖片加載完成后自動按比例調整圖片大小，感興趣的你可以參考下
在處理網(wǎng)頁圖片時,特別是一些圖片列表的應用里面,很難保證圖片統(tǒng)一大小,直接設置圖片大小又會導致圖片拉伸,造成圖片模糊,本文介紹的代碼可以在圖片加載完成后自動按比例調整圖片大小。
Javascript：
< script language="javascript" type="text/javascript">
< !--
// 說明：用 JavaScript 實現(xiàn)網(wǎng)頁圖片等比例縮放
// 整理：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>
調用方式：
Code：
<img src="1148202890.jpg" alt="自動縮放后的效果" onload="javascript：DrawImage(this,200,200);" />
如果圖片較大,建議在圖片標簽里面同時設置期望的圖片大小,這樣不會導致頁面在加載中撐開,該大小不會影響最終縮放效果?？梢孕薷纳厦娴拇a為：
Code：
<img src="1148202890.jpg" alt="自動縮放后的效果" width="200" height="200" onload="javascript：DrawImage(this,200,200);" />
Javascript：
復制代碼 代碼如下:
< script language="javascript" type="text/javascript">
< !--
// 說明：用 JavaScript 實現(xiàn)網(wǎng)頁圖片等比例縮放
// 整理：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>
調用方式：
Code：
復制代碼 代碼如下:
<img src="1148202890.jpg" alt="自動縮放后的效果" onload="javascript：DrawImage(this,200,200);" />
如果圖片較大,建議在圖片標簽里面同時設置期望的圖片大小,這樣不會導致頁面在加載中撐開,該大小不會影響最終縮放效果?？梢孕薷纳厦娴拇a為：
Code：
復制代碼 代碼如下:
<img src="1148202890.jpg" alt="自動縮放后的效果" width="200" height="200" onload="javascript：DrawImage(this,200,200);" />
相關文章
這篇文章主要介紹了小程序click-scroll組件設計，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
JavaScript使用Math.random()生成簡單的驗證碼
今天小編就為大家分享一篇關于JavaScript使用Math.random()生成簡單的驗證碼，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了javascript自定義事件功能與用法,結合實例形式較為詳細的分析了javascript自定義事件的原理、功能、應用與相關注意事項,需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細介紹了js仿iphone秒表功能，可以計算平均數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家介紹了javascript解鎖前端密碼框常見功能做法示例演示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-03-03
這篇文章主要介紹了JS表單驗證源碼（帶錯誤提示及密碼等級）,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了Bootstrap插件，包括Bootstrap過渡效果插件、Bootstrap下拉菜單插件等，感興趣的小伙伴們可以參考一下2016-07-07
使用JavaScript實現(xiàn)文本收起展開(省略)功能
省略號,作為一種常見的文本處理方式,在很多情況下都十分常見,特別是當我們需要在省略號后面添加額外文字時,本文為大家介紹了使用JavaScript實現(xiàn)文本收起展開功能的相關方法,希望對大家有所幫助2024-04-04
這篇文章主要為大家詳細介紹了js動態(tài)實現(xiàn)表格添加和刪除操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)數(shù)字滾動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07