JS等比例縮小圖片尺寸的實例

更新時間：2013年02月27日 14:15:42 作者：

JS等比例縮小圖片尺寸的實例，需要的朋友可以參考一下

為了提升用戶體驗，網(wǎng)站用戶在上傳圖片的時候，我們不能夠讓用戶自己去處理圖片以達到我們的要求。

而通常像淘寶上商品實物展示這樣的頁面，我們需要控制的主要是圖片的寬度。

又考慮到html頁面解析順序可能導致的一些問題，決定通過定義一個簡單的功能函數(shù)，然后在img元素中添加onload事件來調用的方式進行實現(xiàn)，代碼如下：

JS部分

復制代碼代碼如下:

<script type="text/javascript">
 function changeImg(objImg)
 {
     var most = 690;        //設置最大寬度
     if(objImg.width > most)
     {
         var scaling = 1-(objImg.width-most)/objImg.width;    
         //計算縮小比例
         objImg.width = objImg.width*scaling;
         objImg.height = objImg.height;            //img元素沒有設置高度時將自動等比例縮小

         //objImg.height = objImg.height*scaling;    //img元素設置高度時需進行等比例縮小
     }

 }
 </script>

HTML調用部分

復制代碼代碼如下:

您可能感興趣的文章:

可能被忽略的一些JavaScript數(shù)組方法細節(jié)
這篇文章主要給大家介紹了一些可能被忽略的JavaScript數(shù)組方法細節(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-02-02
JavaScript 對象深入學習總結(經(jīng)典)
JavaScript中，除了五種原始類型（即數(shù)字，字符串，布爾值，null，undefined）之外的都是對象了，所以，不把對象學明白怎么繼續(xù)往下學習呢？本篇文章給大家分享javascript對象深入學習總結，小伙伴們跟著小編一起深入學習吧
2015-09-09
JS判斷元素是否在數(shù)組內的實現(xiàn)代碼
這篇文章主要介紹了JS判斷元素是否在數(shù)組內的實現(xiàn)代碼,需要的朋友可以參考下
2016-03-03
淺談JavaScript中的防抖和節(jié)流
防抖和節(jié)流函數(shù)是工作中兩種常用的前端性能優(yōu)化函數(shù),今天我就來總結一下什么是防抖和節(jié)流,并詳細說明一下如何在工作中應用防抖和節(jié)流函數(shù),需要的朋友可以參考下
2023-08-08
Javascript & DHTML DOM基礎和基本API
DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla的瀏覽器最與標準接近。
2008-07-07
全解跨域請求問題處理方法及分析
這篇文章主要為大家介紹了全解跨域請求問題處理方法及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>
2023-07-07
微信小程序webview與h5通過postMessage實現(xiàn)實時通訊的實現(xiàn)
這篇文章主要介紹了微信小程序webview與h5通過postMessage實現(xiàn)實時通訊的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
JavaScript使用addEventListener添加事件監(jiān)聽用法實例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實例分析了addEventListener方法的相關使用技巧,需要的朋友可以參考下
2015-06-06
TypeScript聯(lián)合類型,交叉類型和類型保護
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護，聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，交叉類型就是需要滿足所有類型，交叉類型使用，更多內容我們來看看下面文章詳細內容吧
2021-12-12
webpack 從指定入口文件中提取公共文件的方法
這篇文章主要介紹了webpack 從指定入口文件中提取公共文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11