在处理缩略图的显示上,因为图片大小不规则的关系,所以,基本上有两种情况:
1、留白。让图片的最大边缩小到规定大小。这样做虽然能即保持图片比例,又能完全显示图片,但若设计显示大小比较小,很可能就看不清楚了,还有就是整体显示上,会因留白,变得很丑。
2、隐藏多余的部分。这种做法在很多时候会比第一种好。但如果不做处理,图片往往会隐藏右边部分和下面部分。也就是说,可视部分是从左上角开始。这样也有个坏处,如果图片的左上角开始比较空,看上去就不那么漂亮了。
仔细想想看,大多数的图片重点基本都在中间位置,只要让图片居中显示就会好不好,不管是横向居中还是竖向居中。
所以先看看效果:
这是用firebug显示的图片边框,可以看到,重庆那张图片,左边和右边都隐藏了,显示中间部分。整个页面看上去的效果非常不错。
那下面就讲讲用PHP实现的非常简单的方法
思路:
1、根据目标显示大小和图片实际大小的比例做比较,以图片的最小边为基础缩放图片。这样就会隐藏掉多余的部分。
2、计算图片的位移量。利用(缩略后的图片最大边-目标显示大小)/2,即可得到位移量。
3、输出图片的位移量,写入图片style。
这里同样要解决奇偶的问题,可以看之前的两篇:http://blog.csdn.net/onlyfu/article/details/7495601
下面是代码:
/*
* 格式缩略图大小的位置
* author:fuweiyi
* date:2012.3.31
*/
public function formatPhotoThumb($path,$size='small',$w,$h,$nopic=''){
$data=$this->checkPathStart($path);
$nopic = $nopic ? 'images/'.$nopic : 'images/nopic_'.$size.'.gif';
$photo=file_exists($data)?$this->getSmallPic($data,$size):'images/nopic_'.$size.'.gif';
$size=file_exists($photo)?getimagesize($photo):getimagesize($data);
$r_jo=$size[1]%2==0?0:1;
$f_jo=$h%2==0?0:1;
if($size[0]/$size[1]>$w/$h){
if($r_jo!=$f_jo){
$h=$h+1;
}
$style="height:".$h."px;";
$w_m=($h*$size[0]/$size[1]-$w)/2;
$style.="margin-left:-".$w_m."px;";
}else{
if($r_jo!=$f_jo){
$w=$w+1;
}
$style="width:".$w."px;";
$h_m=($w*$size[1]/$size[0]-$h)/2;
$style.='margin-top:-'.$h_m."px;";
}
return array($photo,$style);
}
该方法有5个参数,和本文有关的,只有3个有用
$path:图片路径
$w:目标显示宽
$h:目标显示高
方法里前三行都不用看,都是用来做其它处理的,和本文内容没有什么关系。
$size,利用getimagesize,获取图片的原始高宽
$r_jo=$size[1]%2==0?0:1;
$f_jo=$h%2==0?0:1;
这两句,是原始图片的高和目标显示高度判断奇偶,后面计算图片比例后,用两个奇偶判断是否相等,如果不相等,因为图片缩略显示的奇偶性,就要给相应的宽或高+1,如果相等,就不用做这个处理了。
$w_m=($h*$size[0]/$size[1]-$w)/2;类似的两句,就是计算位移量
最后把图片地址和style返回。图片输入到模板后,将style写入img的style里,就可以了。