4

https://github.com/fengyuanchen/cropper

I successfully implemented the cropper on 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

Heres 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 setted max width/height.

Thanks

Prateek
  • 1,229
  • 17
  • 31
Duarte Andrade
  • 85
  • 3
  • 9

2 Answers2

3

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.

dippas
  • 58,591
  • 15
  • 114
  • 126
Lex
  • 68
  • 4
0

seems to me that minContainerWidth: 568 for mobile is too big and minContainerHeight: 320 is too small - maybe switch the sizes and see.

if I take Samsung note 8 which is a big phone it will be 360 wide and 740 high

also you may want to css or style the img itself and the container to be max-width: 100%

Ben Zvi
  • 41
  • 3