js和php計算圖檔自适應寬高算法實作

js Code:

<script>
$width = $(imgobj).width(); //圖原始寬
$newheight = $(imgobj).height(); //圖原始高
$w = 693; //最小寬度
$h = 840; //最大寬度
//計算圖檔比例高度
$A=$w / $h;
$A1=$width/$newheight;
if($A1>$A){
    $width=$w;
    $newheight=$w/$A1;
}else if($A1<$A){
    $height=$h;
    $width=$h*$A1;
}else if($A1==$A){
    $width=$w;
    $newheight=$h;
}
$width = parseInt($width);//得到的自适應寬度
$newheight = parseInt($newheight); //得到的自适應高度
</script>      

說明：

設容器寬為W，高為H，則寬高比例為W/H=A；

設被加載圖檔寬為W'，高為H'，則被加載圖檔寬高為W'/H'=A'；

設修正後的被加載圖檔寬為W''，高為H''。

結論：

若被加載圖檔相對容器更寬，更矮：

即當A' > A時，W'' = W, H'' = W / A';

若被加載圖檔相對容器更高，更窄：

即當A' < A時，H'' = H, W'' = H * A';

若被加載圖檔寬高比與容器相當：

即當A' = A時，W'' = W, H'' = H。

php Code:

// src:原圖位址
// w:需要顯示的寬
// h:需要顯示的高
public static function imageSize_tag($src,$w,$h){
    $src='img.jpg';
    $w = 693;
    $h = 840;
    $src = $_SERVER['DOCUMENT_ROOT'].$src;
    $img = getimagesize($src);
    $width = $img[0];
    $height = $img[1];
      
    $A=$w / $h;
    $A1=$width/$height;
    if($A1>$A){
        $width=$w;
        $height=$w/$A1;
        }
    else if($A1<$A){
        $height=$h;
        $width=$h*$A1;
    }
    else if($A1==$A){
        $width=$w;
        $height=$h;
    }
    return "<img src='$src' height='$height' width='$width' />";
}      

朝朝暮暮.