JS圖片等比例縮放方法完整示例
更新時間：2016年08月03日 16:49:18 作者：Quber
這篇文章主要介紹了JS圖片等比例縮放方法,結(jié)合完整實例形式分析了javascript針對頁面圖片元素屬性操作的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JS圖片等比例縮放方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript自動按比例顯示圖片，按比例壓縮圖片顯示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
<img src="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(100,0,this)"
/>
width:100px
<br />
<br />
<img src="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(0,100,this)"
/>
height:100px
<br />
<br />
<img src="1.jpg"
border="0"
width="0"
height="0"
onload="AutoResizeImage(100,100,this)"
/>
width:100px height:100px
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了Bootstrap導(dǎo)航的簡單實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
JS+CSS實現(xiàn)的漂亮漸變背景特效代碼(6個漸變效果)
這篇文章主要介紹了JS+CSS實現(xiàn)的漂亮漸變背景特效代碼,包含6個漸變效果,涉及JavaScript針對頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了原生JS層疊輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了javascript圖片延遲加載實現(xiàn)方法及思路，有時我們需要用懶加載，也就是延遲加載圖片的方式，來提高網(wǎng)站的親和力,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗證，重點介紹了E-mail驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
chrome瀏覽器當(dāng)表單自動填充時如何去除瀏覽器自動添加的默認(rèn)樣式
很多朋友都遇到這個問題：當(dāng)使用chrome瀏覽器表單自動填充時都會自動添加默認(rèn)的樣式，該如何去除默認(rèn)樣式呢？看看小編是怎么去除的，需要的朋友一起學(xué)習(xí)吧2015-10-10
TypeScript?使用?Tuple?Union?聲明函數(shù)重載
這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載，TypeScript 中為函數(shù)添加多個簽名后，依然需要添加相應(yīng)的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應(yīng)的參數(shù)，下文就來探索方法和技巧吧2022-04-04
在編寫代碼時，我們常常用 console.log() 的方式將信息在控制臺中打印出來以幫助我們進(jìn)行前端調(diào)試，那么console.log打印對象時屬性缺失怎么辦？下面我們就一起來了解一下解決方法2019-05-05
JS實現(xiàn)移動端點擊按鈕復(fù)制文本內(nèi)容
本文通過實例代碼給大家介紹了移動端點擊按鈕復(fù)制文本內(nèi)容 ，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
javascript創(chuàng)建頁面蒙板的一些知識技巧總結(jié)
javascript創(chuàng)建頁面蒙板的一些知識技巧總結(jié)...2007-08-08