如何修改JQuery Image Cropper以保持不同尺寸图像的裁剪区域相同？

我有一个 JQuery 图像裁剪器，它工作得很好。但裁剪区域会根据图像尺寸而变化。

就像，如果我要拍照5000x2812裁剪器区域的尺寸如下图所示：（请注意该裁剪器 div 的可滚动高度。我必须滚动到图像才能实际裁剪它）

现在，如果我要拍照150x150裁剪区域的尺寸如下图所示：（请注意，在裁剪区域内调整的图像没有可滚动的高度）

我的代码是这样的：

<div class="upload_div_child_body_attachments">
    <div class="upload_div_child_body_attachments_image">
        <input type="file" form="feed-post" accept="image/x-png,image/gif,image/jpeg" id="image" onchange="previewFile()" name="image" class="upload_div_child_body_attachments_file_image"/>
        <input type="hidden" form="feed-post" name="image_cropped" id="image_cropped" />
        <i class="fa fa-image upload_div_child_body_attachments_image_icon"></i>
    </div>
</div>
<br/>
<div class="upload_div_child_cropped_image"></div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.js'></script>
<script>
var recorte = $('.img-container > img');
recorte.cropper({
  movable: false,
  zoomable: false,
  rotatable: false,
  scalable: false
});

function previewFile() {
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
   $('img').show(); 
   recorte.cropper('replace',reader.result);
   console.log("test");
  }
  if (file) {
    console.log("test2");
    reader.readAsDataURL(file);
    console.log("test3");
  } else {
      console.log("test4");
   recorte.cropper('replace','');
   console.log("test5");
  }
  
  $("#misc_overlay").css("display","block");
  $(".upload_div_image_crop_slide_up").animate({ top: "30%"}, 300);

}

$('.salvar').click(function(){
    temp = recorte.cropper('getCroppedCanvas').toDataURL(); 
    $(".upload_div_child_cropped_image").prepend('<img src="' + temp  + '" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:90%; height:auto;padding:5%;" />')
    $("#image_cropped").val(temp);
    $(".upload_div_image_crop_slide_up").animate({ top: "100%"}, 300);
    $("#misc_overlay, .upload_div_child_body_attachments").css("display","none");
});

$(".upload_div_image_crop_slide_up_header_cross").click(function(){
    $(".upload_div_image_crop_slide_up").animate({ top: "100%"}, 300);
    $("#misc_overlay").css("display","none");
});
</script>

Working JSFiddle https://jsfiddle.net/harish3693/Lf19nwmo/一样的

我唯一的目标是在裁剪器 div 中加载图像，无论图像尺寸如何，都没有任何可滚动高度。

任何帮助是极大的赞赏。