做網站的朋友都想擁有一個漂亮大氣的網站（今天這里織夢模板小編暫時先拋棄代碼優化不談）。當然作為專業的 織夢模板生產商的武林網網站也會十分在意一個網站美化程度。因此織夢模板的所有編輯就成了一個織夢模板優化小組，分批次的和大家介紹織夢模板美化的一系列的教程，該教程都是以織夢模板美化之的標題作為開頭，希望有喜歡的朋友可以留言查看。

       今天我們作為織夢模板美化的第一講，主要給大家介紹的是織夢美化中的一個重要的環節，織夢模板的縮略圖問題。織夢系統默認是將縮略圖縮小為小于等于后臺設置的尺寸。但是因為我們發布的原始圖片的尺寸都是不一樣的，如果前臺是固定圖片框顯示，那么一定顯示不好看。圖片會變形。因此，很多站長為了網站美觀，就手動修改。但是想想就知道這是非常浩大的工程，想想就頭疼。那么有什么既方便又實用的辦法呢？當然是有的呢。

武林網給出的優化方案是這樣的：

1、在后臺設置縮略圖尺寸，設置成前臺最大固定框的尺寸。

2、使織夢提取的縮略圖大于等于后臺設置的尺寸，也就是將原圖等比例縮小成不是寬等于設置尺寸就是高等于。

3、編寫JS函數，前臺顯示縮略圖的時候，使圖片總是水平垂直顯示，DIV不被撐開。

這個應該是綜合最優的方案了，而且一次搞定終身受益。下面我就把詳細教程貼出來。

第一步：后臺設置縮略圖大小

這一步不需要詳細述說了大家都會，下面看第二步。

第二步、修改image.helper.php頁面

if($toWH<=$srcWH){$ftoW=$toW;$ftoH=$ftoW*($srcH/$srcW)}else{$ftoH=$toH$ftoW=$ftoH*($srcW/$srcH)}

將if與else中的代碼互換。

第三步：編寫一個JS函數

function ImageShow(maxWidth,maxHeight,objImg){var img=new Image();img.src=objImg.src;var w=img.width;var h=img.height;if(w==maxWidth&&h==maxHeight){objImg.width=maxWidth;objImg.height=maxHeight;return};var b1=w/h;var b2=maxWidth/maxHeight;if(b1>b2){objImg.height=maxHeight;objImg.width=maxHeight/h*w;objImg.style.marginLeft=-(maxHeight*w-maxWidth*h)/(2*h)+'px'}else{objImg.widt=maxWidth;objImg.height=maxWidth/w*h;objImg.style.margnTop=-(maxWidth*h-maxHeight*w)/(2*w)+'px'}; return};

第四步：CSS控制，圖片所在DIV，設置成圖片要顯示的寬和高

然后增加

“voerflow:hidden”

圖片顯示調用上面的JS函數，具體如下：

<img onload="ImageShow(寬,高,this)" src="圖片地址" />

只要這樣四步，就完美搞定縮略圖問題啦。有興趣的朋友可以嘗試看看。