最もエレガントなイメージからイメージへのフレーム比較アルゴリズム

Question

私は、この問題の最も洗練された「正しい」解決法を見つけることに興味があります。私はJS/PHPを初めて使いました。本当にうれしく思います。目標は、与えられたイメージのサイズをイメージの「フレーム」のサイズと比較して（最終的に<div>または<li>になるように）、それに応じてイメージのサイズを変更することです。ユーザーは多くのサイズと形状の画像をアップロードし、多くのサイズと形状のフレームが作成されます。目標は、指定された画像が、指定されたフレームに合わせて正しくサイズ変更されるようにすることです。最終的な実装はPHPで行われますが、私はJSのロジックを試しています。私は、異なる値の束でそれをテストしてみた

//predefined variables generated dynamically from other parts of script, these are example values showing the 'landscape in landscape' ratio issue 
var $imageHeight = 150, $imageWidth = 310, $height = 240, $width = 300;   
//check image orientation 
if ($imageHeight == $imageWidth) { 
    var $imageType = 1; // square image 
} else if ($imageHeight > $imageWidth) { 
    var $imageType = 2; // portrait image 
} else { 
    var $imageType = 3; // landscape image 
}; 
//check frame orientation and compare to image orientation 
if ($height == $width) { //square frame 
    if (($imageType === 1) || ($imageType === 3)) { 
     $deferToHeight = true; 
    } else { 
     $deferToHeight = false; 
    }; 
} else if ($height > $width) { //portrait frame 
    if (($imageType === 1) || ($imageType === 3)) { 
     $deferToHeight = true; 
    } else { 
     if (($imageHeight/$height) < 1) { 
       $deferToHeight = true; 
      } else { 
       $deferToHeight = false; 
     }; 
    }; 
} else { //landscape frame 
    if (($imageType === 1) || ($imageType === 2)) { 
     $deferToHeight = false; 
    } else { 
     if (($imageWidth/$width) > 1) { 
       $deferToHeight = true; 
      } else { 
       $deferToHeight = false; 
     }; 
    }; 
}; 
//set values to match (null value scales proportionately) 
if ($deferToHeight == true) { //defer image size to height of frame 
    $imageWidth = null; 
    $imageHeight = $height; 
} else { //defer image size to width of frame 
    $imageWidth = $width; 
    $imageHeight = null; 
}; 

、それはを動作しますが、私ははるかにエレガントなソリューションを実装していることができると疑いを持っている：ここでは私が持っているものです。私は何をうまくできましたか？

Answer 1

は、ここで私はJSの実装では、最近、この正確な問題に対処方法は次のとおりです。

// determine aspect ratios 
var a1 = imageWidth/imageHeight, 
    a2 = frameWidth/frameHeight, 
    widthDetermined = a1 > a2; 

// set scale 
var scale = widthDetermined ? 
    // scale determined by width 
    frameWidth/imageWidth : 
    // scale determined by height 
    frameHeight/imageHeight; 

// set size (both dimensions) based on scale 
imageWidth = scale * imageWidth; 
imageHeight = scale * imageHeight; 

はるかに少ないコードバージョンよりも。正方形の大文字と小文字はどちらの方法でも処理されることに注意してください。

Answer 2

画像が正方形の画像を想定していて、それを縦長に変換したい場合は、画像が縦長のように見えませんか？私は割合が変更され、画像が悪く見えるかもしれないと感じます。あなたはどう思いますか？