css+js截取圖片最大面積以保證圖片不變形

css+js截取圖片最大面積以保證圖片不變形

做網站時，把一個欄目的文章移到另一個欄目或文章列表原來定義的文章圖片可以會因為大小不一樣而變形。

可以把文章列表頁面裡的圖片顯示最大面積。 多於的部分就不顯示了。 這樣也是種最好的方法，不要不然每個文章都改一下圖片工作量太大

頁面上的ＤＩＶ


以下為《HTML》原始碼

<div class=”show3img”><img src=”01.jpg” onload=” javascript :DrawImage(this,134,104);”/></div>

CSS部分:

以下為《CSS》原始碼

.show3img{ 
  width:104px; 
 height:134px; 
 border:0; 
 overflow:hidden; 

		
 text-align:center; 
 }

Javascript部分:


以下為《JS》原始碼

<script language=” javascript ”> 
function DrawImage(ImgD,inputheight,inputwidth) 
{ 
//取得圖片的寬度 
ImgWidth=ImgD.width 
//取得圖片的高度 
ImgHeight=ImgD.height; 

		
if(ImgWidth>0 && ImgHeight>0) 
{ 

   //flag=true; 
   if((ImgWidth/ImgHeight) >= (inputwidth/inputheight)) 
   { 

		
         ImgD.height=inputheight; 
        ImgD.width=(ImgWidth*inputheight)/ImgHeight;  

   } else if((ImgWidth/ImgHeight) < (inputwidth/inputheight)){ 
    ImgD.width=inputwidth; 
    ImgD.height=(ImgHeight*inputwidth)/ImgWidth; 
    } 
} 

} 
</script>

這個方法是想在圖片載入後，用 來調用DrawImage方法，來等比例的調整圖片大小，使圖片的一面的長度與ＤＩＶ相同，另一面比ＤＩＶ的長或寬大（多去的部分不顯示），這樣來保證圖片不變形，又是顯示了最大的面積。

但這個方法不是個好的方法：onload事件，只是在頁面載入第一次才觸發，如果是再更新同一個頁面，圖片是從緩衝區裡載入的，不會觸發onload事件，所以對圖片的處理是無效的。

還沒找到更好的方法。