2009年12月7日 19:08

PHP圖片顯示不變形

PHP圖片顯示不變形

前台顯示圖片時,為了讓版型看起來可以很美觀,很整齊,所以會限制圖片顯示的大小。

但是每張圖片寬和高都不一樣,尤其是可以由後台上架的 圖片,如果使用者,上架上來的圖片,沒有符合前台所訂的寬和高,則,如果:程式只限制寬度,或者只限制高度,依瀏覽器的標準,有的會自動縮圖,但有的又不 會自己縮圖,而且會超過我們所定義的寬和高,破壞版型,圖片也會變形。
如果:程式有設高度和寬度,不會破壞版型,但是圖片也會變形。

所以這以以一個程式的範例,將圖片顯示時,寬度和高度都等比例的縮放,並且將縮小的圖片放到中間的位置。

這個範例所設定顯示的圖片,其寬比高多,所以是橫式的相片顯示模式,若為直示的顯示模式,就將裡面的寬和高改一下,就可以了。


程式:

//將CSS放到<head>...</head>中
<style type="text/css">
<!--
.prod_img2{  //設定圖片為背景色
border:0px;
background-color:#FFFFFF;
}

.prod_img2_back{  //給一個固定的外框,設定好大小,這樣圖片就會以此框為主,放置中間的位置
width:109px;
height:89px;
border:1px solid #C0C0C0;
background-color:#FFFFFF;
position: relative;
left: -5px;
top: -5px;
text-align:center;
vertical-align:middle;
line-height:89px;
}
-->
</style>

$fileimg=base_url().$product_list_photo1['NAME'];
$setwidth=109;  //設定要顯示寬109,高89的橫示圖片
$sethigh=89;
 include("image_size.php"); //用include的方式,則其他頁面程式,也可呼叫使用
$padding= round(($sethigh - $high)/2);    //圖片放置的位置
                        
echo "<div class='prod_img2_back'>";                       
 echo "<img src='xxx.jpg' class='prod_img2' style='width:".$width."px; height:".$high."px;position:relative; padding-top:".$padding."px;' />";
echo "</div>";

image_size.php檔:

<?PHP
            if(@fopen($fileimg,"r")){ //判斷圖片是否存在
                   list($width,$height)= getimagesize($fileimg);
                                   
                   $width=$width; //取得圖片寬
                   $high=$height;//取得圖片高
                                         
                   if($width <= $high){ //直式,正方型
                        $Divisor=round($high/$sethigh,2);  //四捨五入取到小數二位
                        $width=round($width/$Divisor); //四捨五入取到整數
                        $high=$sethigh;
                   }else{  //橫式
                        $Divisor=round($width/$setwidth,2);  //四捨五入取到小數二位
                        $width=$setwidth;
                        $high=round($high/$Divisor); //四捨五入取到整數       
                          if($high > $sethigh){
                             $Divisor=round($high/$sethigh,2);
                             $width=round($width/$Divisor);
                             $high=$sethigh;
                          }           
                   }
            }else{ //圖片不存在
              $width=0;
              $high=0;
            }
?>

  • jessica_chu 發表於樂多回應(0)引用(0)網頁實用範例編輯本文
    樂多分類:網路/3C切換閱讀版型 │昨日人次:1 │累計人次:1241 │標籤:php教學,php文章,php筆記,PHP範例
     

    引用URL

    http://cgi.blog.roodo.com/trackback/10942509