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

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

又考慮到html頁(yè)面解析順序可能導(dǎo)致的一些問(wèn)題，決定通過(guò)定義一個(gè)簡(jiǎn)單的功能函數(shù)，然后在img元素中添加onload事件來(lái)調(diào)用的方式進(jìn)行實(shí)現(xiàn)，代碼如下：

JS部分

代碼如下:
<script type="text/javascript">
 function changeImg(objImg)
 {
     var most = 690;        //設(shè)置最大寬度
     if(objImg.width > most)
     {
         var scaling = 1-(objImg.width-most)/objImg.width;   
         //計(jì)算縮小比例
         objImg.width = objImg.width*scaling;
         objImg.height = objImg.height;            //img元素沒(méi)有設(shè)置高度時(shí)將自動(dòng)等比例縮小

         //objImg.height = objImg.height*scaling;    //img元素設(shè)置高度時(shí)需進(jìn)行等比例縮小
     }

 }
 </script>

HTML調(diào)用部分

代碼如下:
 <img src="" onload="changeImg(this);" />