выбранное изображение не отображается в полном размере в croopie

Question

Я использую cropp ie для обрезки изображения. Но полный размер изображения не отображается во всплывающем окне.

Мой код:

<div class="col-md-6 mb-50">
 <span class="input">
 <label class="" for="cf-email" style="font-weight: 500;">Upload Logo </label>
  <input class="input__field cf-validate check-image-size" type="file" id="logo" name="logo" accept="image/png,image/jpeg" />
 </span>
</div>

<div class="col-md-6 mb-50">
 <span class="input">
 <label class="" for="cf-email" style="font-weight: 500;">Selected Logo </label>
 <div id="uploaded_logo"></div>
 </span>
</div>

Мой модал:

<div id="uploadlogoModal" class="modal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-8 text-center">
                                  <div id="logo_demo" style="margin-top:30px"></div>
                            </div>
                            <div class="col-md-4" style="padding-top:30px;">
                                <br />
                                <br />
                                <br/>
                                  <button class="btn btn-success crop_logo">Crop & Upload Logo</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

JS IS:

<script>
$(document).ready(function(){

$logo_crop = $('#logo_demo').croppie({
enableExif: true,
viewport: {
  width:230,
  height:230,
  type:'rawcanvas' //circle
},
boundary:{
  width:400,
  height:400
}
});

$('#logo').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
  $logo_crop.croppie('bind', {
    url: event.target.result
  }).then(function(){
    console.log('jQuery bind complete');
  });
}
reader.readAsDataURL(this.files[0]);
$('#uploadlogoModal').modal('show');
});

$('.crop_logo').click(function(event){
$logo_crop.croppie('result', {
  type: 'canvas',
  size: 'viewport'
}).then(function(response){
  $.ajax({
    url:"upload.php",
    type: "POST",
    data:{"logo": response},
    success:function(data)
    {
        console.log(data);
      $('#uploadlogoModal').modal('hide');
      $('#uploaded_logo').html(data);
    }
  });
})
});
});
</script>

Существует ширина: 230, высота: 230, но когда я использую изображение шириной 1000 пикселей. Тогда изображение выходит за пределы dry.

Но мне нужно выбрать изображение на границе, а не снаружи от границы. Я искал это в Google. Пожалуйста, помогите.