让图片居中显示（PHP）

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

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