让图片居中显示(PHP)

来源:互联网 发布:图片大小批处理软件 编辑:程序博客网 时间:2024/05/16 15:48

在处理缩略图的显示上,因为图片大小不规则的关系,所以,基本上有两种情况:

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里,就可以了。