Copyright @ 2015-2020 织梦园 版权所有 Power by DedeCms
鲁ICP备15039853号-1
模板标签 TAG标签 网站地图 XML地图 今日更新 返回顶部
因为原图片的尺寸都是不一样的，如果前台是固定图片框显示，那么***显示不好看。图片会变形。因此，很多站长为了网站美观，就手动修改。想想这工程浩大啊。
那么有什么既方便又实用的办法呢？
给出的优化方案是这样的：
1、在后台设置缩略图尺寸，设置成前台***大固定框的尺寸。
2、使织梦提取的缩略图大于等于后台设置的尺寸，也就是将原图等比例缩小成不是宽等于设置尺寸就是高等于。
3、编写JS函数，前台显示缩略图的时候，使图片总是水平垂直显示，DIV不被撑开。
这个应该是综合***优的方案了，而且一次搞定终身受益。下面我就把详细教程贴出来。
***步：
后台设置缩略图大小。
第二步：修改image.helper.php页面
if($toWH<=$srcWH)
{
$ftoW=$toW;
$ftoH=$ftoW*($srcH/$srcW)
}
else
{
$ftoH=$toH
$ftoW=$ftoH*($srcW/$srcH)
}
|
第三步：
编写一个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="图片地址" />
只要这样四步，就***搞定缩略图问题啦。
