php - Jcrop トリミング領域が正しい比率を維持しないのはなぜですか

Question

Jcrop を使用して元の画像を歪めずに、画像を 342x478 ピクセル サイズにトリミングしようとしています。ユーザーは、画像のトリミング領域を移動して、目的の位置を選択できます。ただし、表示される四角形のトリミング領域は、アップロードされた元の画像と同じ比率で表示され、342x478 の比率を維持していません。

たとえば、120x210 の画像をアップロードすると、トリミング領域が 342x478 の比率ではなくその比率で表示されるため、画像が歪んでしまいます。小さな画像の問題は修正しましたが、大きな画像ではうまくいきません。

コードは次のとおりです。

echo "<img src='images/test/".$image1_name."' width='342' height='478'  class='preview' id='cropbox' >";
                                echo"

                                <script src=\"js/jquery.Jcrop.js\"></script>
<script type=\"text/javascript\">

  $(function(){
    $('#cropbox').Jcrop({
        trueSize: [".$size1[0].",".$size1[1]."],
         boxWidth: 342, 
         boxHeight: 478,
      onSelect: updateCoords

    });

      $('#create').submit(function() { 
    $.ajax({ 
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) {
            var a= response;
        $('#preview1 .jcrop-holder img').attr('src','');
        $('#preview1 .preview').attr('src','');
        $('#preview1 #cropbox').attr('src','');
        $('#preview1 .jcrop-holder img').delay(800).attr('src',a);
        $('#preview1 .preview').delay(800).attr('src',a);
        $('#preview1 #cropbox').delay(800).attr('src',a);


        }



    });
    return false; });


    $('#uploadimg').click(function() {
        var titleleft = $('#preview1 #cropbox').attr('src');
        var titleright = $('#preview2 #cropbox1').attr('src');
            $.ajax({
   type: 'POST',
   url: 'some.php',
   data: 'left='+ titleleft+'&right='+ titleright,
   success: function(){

   }
 });

});


  });

  function updateCoords(c)
  {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };
</script>
<link rel=\"stylesheet\" href=\"demo_files/main.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"demo_files/demos.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"css/jquery.Jcrop.css\" type=\"text/css\" />";
echo "<form onsubmit='return checkCoords();'method='post' action='test.php' id='create' >
            <input type='hidden' name='x' id='x' >
            <input type='hidden' name='y' id='y' >
            <input type='hidden' name='w' id='w' >
            <input type='hidden' name='h' id='h'>
            <input type='hidden' name='img' id='h' value='images/test/".$image1_name."'>
            <input type='submit' value='Crop Image'>
        </form>";

誰かがそれを修正するのを手伝ってくれるなら、クロッピング領域がすべての画像の高さのスペース全体を埋め、幅が 342x478 の比率に適応するようにして、ユーザーがクロッピング領域を左右にのみ移動できるようにします。

どんな助けでもありがとう