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