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