JavaScript等比例縮放圖片控制超出范圍的圖片
更新時(shí)間：2013年08月06日 15:56:40 作者：
當(dāng)網(wǎng)頁加載一個(gè)尺寸比較大的圖片時(shí)，往往會(huì)把一個(gè)網(wǎng)頁撐的變形，頁面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片
js等比例縮放圖片，這個(gè)功能非常實(shí)用，當(dāng)網(wǎng)頁加載一個(gè)尺寸比較大的圖片時(shí)，往往會(huì)把一個(gè)網(wǎng)頁撐的變形，頁面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片，腳本之家以穩(wě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://m.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://m.fzitv.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自動(dòng)縮放后的效果"
width="100"
height="100"
onload="javascript：DrawImage(this,80,80)"
/></body></html>
您可能感興趣的文章:
相關(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ù)傳遞的代碼示例
在微信小程序中,我們無法直接通過 bindtap="handleClick(1,2,3)" 的方式傳遞參數(shù),而是通過自定義屬性data- 的方式傳遞,并在事件回調(diào)函數(shù)中通過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 的方法?？梢赃@樣說，正確掌握了 JavaScript 中的 this 關(guān)鍵字，才算邁入了 JavaScript 這門語言的門檻。2014-12-12
條件表達(dá)式，是我們在coding過程中永遠(yuǎn)躲不開的問題，也是我們騙代碼行數(shù)最方便的東西，但作為一名程序員，我們也要追求自己的“信達(dá)雅”，下面就讓我們看看以下幾種常見的條件表達(dá)場景，如何寫的漂亮！2021-05-05
這篇文章主和要介紹了fetch 使用及如何接收J(rèn)S傳值,文中給大家提到了fetch基本使用方式和接收js傳值的使用方式,需要的朋友可以參考下2017-11-11
本文主要分享了js實(shí)現(xiàn)簡單的計(jì)算器功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
下面小編就為大家?guī)硪黄昝澜鉀QJS文件頁面加載時(shí)的阻塞問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
本文主要對js表達(dá)式與js運(yùn)算符進(jìn)行詳細(xì)介紹。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-02-02