JavaScript實現(xiàn)網(wǎng)頁圖片等比例縮放實現(xiàn)代碼及調(diào)用方式
更新時間：2013年02月25日 14:07:11 作者：
為了保證圖片統(tǒng)一大小，直接設(shè)置圖片大小又會導(dǎo)致圖片拉伸,造成圖片模糊，接下來將介紹的代碼可以在圖片加載完成后自動按比例調(diào)整圖片大小，感興趣的你可以參考下
在處理網(wǎng)頁圖片時,特別是一些圖片列表的應(yīng)用里面,很難保證圖片統(tǒng)一大小,直接設(shè)置圖片大小又會導(dǎo)致圖片拉伸,造成圖片模糊,本文介紹的代碼可以在圖片加載完成后自動按比例調(diào)整圖片大小。
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>
調(diào)用方式：
Code：
<img src="1148202890.jpg" alt="自動縮放后的效果" onload="javascript：DrawImage(this,200,200);" />
如果圖片較大,建議在圖片標(biāo)簽里面同時設(shè)置期望的圖片大小,這樣不會導(dǎo)致頁面在加載中撐開,該大小不會影響最終縮放效果?？梢孕薷纳厦娴拇a為：
Code：
<img src="1148202890.jpg" alt="自動縮放后的效果" width="200" height="200" onload="javascript：DrawImage(this,200,200);" />
Javascript：
復(fù)制代碼 代碼如下:
< 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>
調(diào)用方式：
Code：
復(fù)制代碼 代碼如下:
<img src="1148202890.jpg" alt="自動縮放后的效果" onload="javascript：DrawImage(this,200,200);" />
如果圖片較大,建議在圖片標(biāo)簽里面同時設(shè)置期望的圖片大小,這樣不會導(dǎo)致頁面在加載中撐開,該大小不會影響最終縮放效果?？梢孕薷纳厦娴拇a為：
Code：
復(fù)制代碼 代碼如下:
<img src="1148202890.jpg" alt="自動縮放后的效果" width="200" height="200" onload="javascript：DrawImage(this,200,200);" />
相關(guān)文章
javascript實現(xiàn)全角與半角字符的轉(zhuǎn)換
這篇文章主要介紹了javascript實現(xiàn)全角與半角字符的轉(zhuǎn)換的相關(guān)代碼與知識點分享,需要的朋友可以參考下2015-01-01
下面小編就為大家分享一篇用JS實現(xiàn)非首屏圖片延遲加載的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)
下面小編就為大家?guī)硪黄狫avaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
bootstrap-table 是一個輕量級的table插件，使用AJAX獲取JSON格式的數(shù)據(jù)，其分頁和數(shù)據(jù)填充很方便，支持國際化。這篇文章介紹了bootstrap中table分頁插件的使用，感興趣的朋友一起看看吧2016-10-10
JS實現(xiàn)快速的導(dǎo)航下拉菜單動畫效果附源碼下載
本文給大家分享一個帶有變形動畫特效的下拉導(dǎo)航菜單特效，該導(dǎo)航菜單在菜單項之間切換時，下拉菜單會快速的根據(jù)菜單內(nèi)容的大小來動態(tài)變形，顯示合適的下拉菜單大小，效果非常棒。對導(dǎo)航下拉菜單代碼感興趣的朋友可以參考下本文2016-11-11
復(fù)制到剪貼板的js代碼（兼容ie、firefox、chorme、safari...什么都兼容！）2011-10-10
在現(xiàn)代Web應(yīng)用中,為了提升用戶體驗并確保系統(tǒng)的穩(wěn)定性和一致性,部署前端版本更新后及時提醒用戶進(jìn)行頁面刷新是至關(guān)重要的,所以本文給大家介紹了基于前端實現(xiàn)版本更新自動檢測的流程步驟,需要的朋友可以參考下2025-03-03
JavaScript實現(xiàn)異步獲取表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)異步獲取表單數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
微信小程序?qū)崿F(xiàn)橫向滾動導(dǎo)航欄效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)橫向滾動導(dǎo)航欄效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了如何利用css+原生js制作簡單的鐘表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07