织梦缩略图完美优化,DEDE技术
导读:DEDE技术DEDE技术相信很多站长都在头痛如何处理缩略图的问题吧。织梦系统默认是将缩略图缩小为小于等于后台设置的尺寸。因为原图片的尺寸都是不一样的,如果前台是固定图片框显示,那么一定dede5.7模板dede58模板。
相信很多站长都在头痛如何处理缩略图的问题吧。织梦系统默认是将缩略图缩小为小于等于后台设置的尺寸。 因为手机模板dede原图片的尺寸都是不一样的,如果前台是固定图片框显示,那么一定显示不好看。图片会变形。因此,很多站长为了网站美观,就手动修改。想想这工程浩大啊。 那么有什么既方便又实用的办法呢? Abing给出的优化方案是这样的: 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=-(maxWidt织梦模板网站h*h- maxHeight*w)/(2*w)+'px' }; return }; 第四步: CSS,图片所在DIV,设置成图片要显示的宽和高,然后增加“voerflow:hidden” 图片显示调用上面的JS函数,dede模板安装具体如下: <img onload="ImageShow(宽,高,this)" src="图片地址" /> 只要这样四步,就完美搞定缩略图问题啦。 我的网站所有缩略图均非手工处理。可以访问我的网站——旧物格网 查看实际效果。相关dede5.7模板dede58模板。
声明: 本文由我的SEOUC技术文章主页发布于:2023-07-19 ,文章织梦缩略图完美优化,DEDE技术主要讲述缩略图,完美,织梦网站建设源码以及服务器配置搭建相关技术文章。转载请保留链接: https://www.seouc.com/article/web_30514.html