等比例縮放圖片 js

SieSteven發表於2014-07-10
JS

文章是抄來的，還沒在專案中嘗試，先存再說：

--文章中的方法用過了,不過在現在的專案中判斷長寬比的條件取反後才好使的.


現在的部落格很多都會在歸檔頁顯示一個文章的縮圖，有的是呼叫文章中的圖片，有的是新增的特色圖片，不過我相信大多數都是呼叫文章中的圖片，----因為都很懶
不過，歸檔頁的圖片都會限定大小，最普遍的做法(我也是)都是直接給圖片申明大小，硬生生的把圖片縮小，這樣做的後果就是圖片變形、變模糊。要想圖片縮小後不變模糊，只能是等比例縮放，這樣又有個問題。。。比如我們首頁需要顯示一個一個150×150的正方形縮圖片，但是我們文章中的圖片是長方形的。。。等比例縮放之後還是長方形的。。這這這。。。。
先不管，先看圖片等比縮放方法：
一、縮放所需要的js程式碼

    1. <script language="javascript" type="text/javascript">   
    2. //定義一個函式imgscale  引數：圖片物件、圖片預想的寬度、圖片預想的高度   
    3. function imgscale(ImgD,FitWidth,FitHeight){   
    4.     var image = new Image();   
    5.     image.src = ImgD.src;   
    6.     //比較 (實際圖片的長寬比) 和 (預想的長寬比)   
    7.     if(image.width>0 && image.height>0) {   
    8.         //如果圖片相對更胖   
    9.         if(image.width/image.height >= FitWidth/FitHeight) {   
    10.                 //讓圖片的高達到預想的   
    11.                 ImgD.height = FitHeight;   
    12.                 //圖片的寬按比例   
    13.                 ImgD.width = (image.width*FitHeight)/image.height;    
    14.         } else {   
    15.         //如果更扁   
    16.                 ImgD.width = FitWidth;   
    17.                 ImgD.height = (image.height*FitWidth)/image.width;    
    18.         }    
    19.     }    
    20. }    
    21. //-->    
    22. </script>  

將上面給出的js程式碼放在網頁頭部，注意這個還是放網頁頭部的好，如果放在網頁底部，用IE除錯會出現imgscale未定義。
然後給圖片的html程式碼加上執行這個函式：

    1. <img href="xx/xx.jpg" title="圖片縮放" width="150"; height="150" onload="javascript:imgscale(this,150,150)" />  
    2. //圖片載入後執行imgscale函式,前面給定width和height是為了讓圖片在載入過程中也是這麼大，不會影響最終效果  

圖片縮放後會出現兩種情況：一、假設圖片縮小後是更胖、比如200×150，這樣水平方向會多出50個畫素。。
二、假設圖片縮小後是更瘦、比如150×250,這樣豎直方向又多出100畫素。。。
解決方法就是給圖片加個div(也可以在原有div上操作)，給這個div的css類新增overflow: hidden;width:150px;height:150px;屬性，這個css屬性給div限定大小，超出部分隱藏。
比如：

    1. <div class="imgdiv">  
    2. <img href="xx/xx.jpg" title="圖片縮放" width="150"; height="150" onload="javascript:imgscale(this,150,150)" />  
    3. </div>  

它的css:

    1. <!--它的css如下-->   
    2. .imgdiv{   
    3.     width:150px;   
    4.     height:150px;   
    5.     overflow: hidden;   
    6. }  

相關文章