How to modify JQuery Image Cropper to keep the cropping area same for images with different dimensions?

I have a JQuery image cropper which works perfectly fine. But the cropping area changes as per the image dimensions.

Like, if I'm to take an image with 5000x2812 dimensions the cropper area looks like the below screenshot: (please note the scrollable height of that cropper div. I had to scroll to the image to crop it actually)

Now, if I'm to take an image with 150x150 dimensions the cropper area looks like the below screenshot: (please note that the image adjusted inside the cropper div with no scrollable height)

My code goes like this:

<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 JS Fiddle of the same

My only objective is to load the image in the cropper div without any scrollable height no matter the image dimensions.

Any help is greatly appreciated.