为什么我的Jcrop裁剪区域没有保持正确的比例

Question

I'm trying to crop images down to a 342x478 pixel size without distorting the original image using Jcrop. the users can move a cropping area around the image to choose the desired position. except the cropping rectangle area displayed is appearing at the same ratio as the original image being uploaded and not maintining the 342x478 ratio.

So for example when I upload a image that is 120x210, the cropping area appears at that ratio and not the 342x478 ratio so the image becomes distorted. I have fixed problems for small images, but for larger ones it just doesn't work.

heres the code:

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>";

then if someone can help me fix that, I would also like the cropping area to fill the entire height space of every image and have the width adapt to the 342x478 ratio, so users can move the cropping area left and right only.

any help would be great thanks