How to make jQuery Cropper responsive

Question

https://github.com/fengyuanchen/cropper

I successfully implemented the jQuery Cropper library in my project but it's not usable on mobile because the image is always bigger than the modal container (the cropper is inside a modal) and I cannot see all the image on mobile res because it overflows

I tried several combinations of max-widths, widths, on containers, on the img tag but cannot do it, I have set:

minContainerWidth: 568,
minContainerHeight: 320

If I remove it, it works but the default is 100x200 which is too small even on mobile and super small on PC

Here's my setup:

reader.onloadend = function () {
   $cropperModal.find('.image-container').html($img);
    $img.attr('src', reader.result);
    $img.cropper({
        preview: '.image-preview',
        aspectRatio: 16 / 11,
        autoCropArea: 1,
        movable: false,
        cropBoxResizable: true,
        minContainerWidth: 568,
        minContainerHeight: 320
    });
};

MODAL:

var modalTemplate = '' +
        '<div class="modal fade" tabindex="-1" role="dialog" style="z-index: 99999;">' +
        '<div class="modal-dialog" role="document">' +
        '<div class="modal-content-recorte widthimage">' +
        '<div class="modal-header">' +
        '<h4 class="popup_title"> @lang('popups.crop_img') </h4>' +
        '<p class="popupcontent"> @lang('popups.crop_img_desc') </p>' +
        '</div>' +
        '<div class="modal-body">' +
        '<div class="image-container""> </div>' +
        '</div>' +
        '<div class="modal-footer" style="text-align:center">' +
        '<button type="button" class="btn btn-primary crop-upload">Upload</button>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '';

I want to set like a max size, and that the cropper stuff adapts to the screen when its smaller than the set max width/height.

Answer 1

From the GitHub:

The size of the cropper inherits from the size of the image's parent element (wrapper), so be sure to wrap the image with a visible block element.

So, wrap your cropper element in a div:

<div class="img-container">
    <img id="cropperImage">
</div>

Then in your CSS

.img-container{
  min-width: 50vw; /*your responsive value here*/
  min-height: 50vh; /*your responsive value here*/
}
#cropperImage{
  max-width: 100%; /* prevent the overflow blip when the modal loads */
}

You could set minContainerWidth with something like window.innerWidth, but the container won't be responsive, so if the user rotates their phone, it will overflow beyond the modal and look horrible.