花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來到素材無憂網(wǎng),按 + 收藏我們
登錄 注冊 退出 找回密碼

織夢縮略圖完美優(yōu)化

時間: 2019-05-13 10:21 閱讀: 作者:素材無憂網(wǎng)

      相信很多站長都在頭痛如何處理縮略圖的問題吧??棄粝到y(tǒng)默認是將縮略圖縮小為小于等于后臺設置的尺寸。
      因為原圖片的尺寸都是不一樣的,如果前臺是固定圖片框顯示,那么一定顯示不好看。圖片會變形。因此,很多站長為了網(wǎng)站美觀,就手動修改。想想這工程浩大啊。
      那么有什么既方便又實用的辦法呢?

Abing給出的優(yōu)化方案是這樣的:
1、在后臺設置縮略圖尺寸,設置成前臺最大固定框的尺寸。
2、使織夢提取的縮略圖大于等于后臺設置的尺寸,也就是將原圖等比例縮小成不是寬等于設置尺寸就是高等于。
3、編寫JS函數(shù),前臺顯示縮略圖的時候,使圖片總是水平垂直顯示,DIV不被撐開。
這個應該是綜合最優(yōu)的方案了,而且一次搞定終身受益。下面我就把詳細教程貼出來。

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


第二步:修改image.helper.php頁面
if($toWH<=$srcWH) { $ftoW=$toW; $ftoH=$ftoW*($srcH/$srcW) } else { $ftoH=$toH $ftoW=$ftoH*($srcW/$srcH) }  
將if與else中的代碼互換。



第三步:
編寫一個JS函數(shù)。
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”
圖片顯示調(diào)用上面的JS函數(shù),具體如下:
<img onload="ImageShow(寬,高,this)" src="圖片地址" />

只要這樣四步,就完美搞定縮略圖問題啦。


我的網(wǎng)站所有縮略圖均非手工處理??梢栽L問我的網(wǎng)站——舊物格網(wǎng) 查看實際效果。

版權聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!

轉(zhuǎn)載請注明: 織夢縮略圖完美優(yōu)化

標簽: 織夢縮略圖  
相關文章
模板推薦