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);" />
相關文章
這篇文章主要介紹了javascript實現(xiàn)全角與半角字符的轉換的相關代碼與知識點分享,需要的朋友可以參考下2015-01-01
下面小編就為大家分享一篇用JS實現(xiàn)非首屏圖片延遲加載的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質
下面小編就為大家?guī)硪黄狫avaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
bootstrap-table 是一個輕量級的table插件，使用AJAX獲取JSON格式的數(shù)據(jù)，其分頁和數(shù)據(jù)填充很方便，支持國際化。這篇文章介紹了bootstrap中table分頁插件的使用，感興趣的朋友一起看看吧2016-10-10
本文給大家分享一個帶有變形動畫特效的下拉導航菜單特效，該導航菜單在菜單項之間切換時，下拉菜單會快速的根據(jù)菜單內(nèi)容的大小來動態(tài)變形，顯示合適的下拉菜單大小，效果非常棒。對導航下拉菜單代碼感興趣的朋友可以參考下本文2016-11-11
復制到剪貼板的js代碼（兼容ie、firefox、chorme、safari...什么都兼容?。?2011-10-10
在現(xiàn)代Web應用中,為了提升用戶體驗并確保系統(tǒng)的穩(wěn)定性和一致性,部署前端版本更新后及時提醒用戶進行頁面刷新是至關重要的,所以本文給大家介紹了基于前端實現(xiàn)版本更新自動檢測的流程步驟,需要的朋友可以參考下2025-03-03
JavaScript實現(xiàn)異步獲取表單數(shù)據(jù)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)異步獲取表單數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了微信小程序實現(xiàn)橫向滾動導航欄效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了如何利用css+原生js制作簡單的鐘表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07