JavaScript等比例縮放圖片控制超出范圍的圖片
更新時(shí)間：2013年08月06日 15:56:40 作者：
當(dāng)網(wǎng)頁(yè)加載一個(gè)尺寸比較大的圖片時(shí)，往往會(huì)把一個(gè)網(wǎng)頁(yè)撐的變形，頁(yè)面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片
js等比例縮放圖片，這個(gè)功能非常實(shí)用，當(dāng)網(wǎng)頁(yè)加載一個(gè)尺寸比較大的圖片時(shí)，往往會(huì)把一個(gè)網(wǎng)頁(yè)撐的變形，頁(yè)面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片，腳本之家以穩(wěn)定頁(yè)面布局，本代碼段就是完成了此功能，而且代碼非常簡(jiǎn)潔，效果很好。
<html><head><title>等比例縮放圖片</title><script>function
DrawImage(ImgD,iwidth,iheight){ //參數(shù)(圖片,允許的寬度,允許的高度)
var
image=new Image(); image.src=ImgD.src;
if(image.width>0
&& image.height>0){ if(image.width/image.height>=
iwidth/iheight){ if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script></head><body><img
src=http://www.fzitv.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自動(dòng)縮放后的效果"
width="100"
height="100"
onload="javascript：DrawImage(this,80,80)"
/></body></html>
復(fù)制代碼 代碼如下:
<html><head><title>等比例縮放圖片</title><script>function
DrawImage(ImgD,iwidth,iheight){ //參數(shù)(圖片,允許的寬度,允許的高度)
var
image=new Image(); image.src=ImgD.src;
if(image.width>0
&& image.height>0){ if(image.width/image.height>=
iwidth/iheight){ if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script></head><body><img
src=http://www.fzitv.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自動(dòng)縮放后的效果"
width="100"
height="100"
onload="javascript：DrawImage(this,80,80)"
/></body></html>
您可能感興趣的文章:
- js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動(dòng)縮放圖片的方法
- js同比例縮放圖片的小例子
- THINKPHP+JS實(shí)現(xiàn)縮放圖片式截圖的實(shí)現(xiàn)
- javascript 實(shí)現(xiàn)的完全兼容鼠標(biāo)滾軸縮放圖片的代碼
- js實(shí)現(xiàn)頭像圖片切割縮放及無(wú)刷新上傳圖片的方法
- js實(shí)現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法
- JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)按比例縮放圖片的方法(附C#版代碼)
相關(guān)文章
這篇文章主要介紹了JS模擬Dialog彈出浮動(dòng)框效果代碼,涉及JavaScript可拖動(dòng)窗口的創(chuàng)建及布局相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Javascript實(shí)現(xiàn)的常用算法（如冒泡、快速、鴿巢、奇偶等）
這篇文章主要介紹了Javascript實(shí)現(xiàn)的常用算法,如冒泡、快速、鴿巢、選擇、木桶、奇偶等,需要的朋友可以參考下2014-04-04
微信小程序 bindtap 事件多參數(shù)傳遞的代碼示例
在微信小程序中,我們無(wú)法直接通過(guò) bindtap="handleClick(1,2,3)" 的方式傳遞參數(shù),而是通過(guò)自定義屬性data- 的方式傳遞,并在事件回調(diào)函數(shù)中通過(guò)event.currentTarget.dataset獲取這些參數(shù),本文給大家介紹小程序 bindtap 事件多參數(shù)傳遞的實(shí)例代碼,感興趣的朋友一起看看吧2023-12-12
JS網(wǎng)絡(luò)游戲-(模擬城市webgame)提供的一些例子下載
JS網(wǎng)絡(luò)游戲-(模擬城市webgame)提供的一些例子下載...2007-10-10
avaScript 中的 this 關(guān)鍵字，深入淺出的分析其在不同情況下的含義，形成這種情況的原因以及 Dojo 等 JavaScript 工具中提供的綁定 this 的方法?？梢赃@樣說(shuō)，正確掌握了 JavaScript 中的 this 關(guān)鍵字，才算邁入了 JavaScript 這門(mén)語(yǔ)言的門(mén)檻。2014-12-12
條件表達(dá)式，是我們?cè)赾oding過(guò)程中永遠(yuǎn)躲不開(kāi)的問(wèn)題，也是我們騙代碼行數(shù)最方便的東西，但作為一名程序員，我們也要追求自己的“信達(dá)雅”，下面就讓我們看看以下幾種常見(jiàn)的條件表達(dá)場(chǎng)景，如何寫(xiě)的漂亮！2021-05-05
這篇文章主和要介紹了fetch 使用及如何接收J(rèn)S傳值,文中給大家提到了fetch基本使用方式和接收js傳值的使用方式,需要的朋友可以參考下2017-11-11
js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
本文主要分享了js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
完美解決JS文件頁(yè)面加載時(shí)的阻塞問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決JS文件頁(yè)面加載時(shí)的阻塞問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
本文主要對(duì)js表達(dá)式與js運(yùn)算符進(jìn)行詳細(xì)介紹。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-02-02