Adapt cropper area/img container to mobile resolutions

[BugDroid-Duarte]

Hello,

I sucessfully implement the cropper on my project but its not usable on mobile because the image is always bigger than the modal container (the cropper is inside a modal) andi cannot see all the image on mobile res.

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

minContainerWidth: 568, minContainerHeight: 320

If i remove it, it works but then its too small 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 = '' + '

' + '

' + '

' + '

' + '

@lang('popups.crop_img')

' + '

@lang('popups.crop_img_desc')

' + '

' + '

' + '<div class="image-container"">

' + '

' + '

' + 'Upload' + '

' + '

' + '

' + '

[fengyuanchen]

You need a responsive container: https://github.com/fengyuanchen/cropper/blob/master/examples/responsive-container.html