Hello i just want to ask how can i set the maximum size of my cropbox? Because i got a image frame which have a 400x400 image size then inside of it is a box container which going to be the place where the cropped image from the cropbox go.

I have this jQuery code

var img = $('#image');
$('#image').on('load', function () {
  img.cropper({
    aspectRatio         : 1,
    scalable            : true,
    rotatable           : true,
    checkOrientation    : true,
    cropBoxResizable    : true,
    dragMode            : 'move',
    minCropBoxWidth     : 346,
    minCropBoxHeight    : 269,
    minContainerHeight  : 400,
    minContainerWidth   : 400,
    minCanvasWidth      : 400,
    minCanvasHeight     : 400,
    viewMode            : 1
  });
  img.cropper("setCropBoxData", { width: "346", height: "269" });
}

It works normal but no changes have been made with my cropbox. It only set its minimum size but not the maximum. Any solutions will help thanks.

Hello i just want to ask how can i set the maximum size of my cropbox? Because i got a image frame which have a 400x400 image size then inside of it is a box container which going to be the place where the cropped image from the cropbox go.

I have this jQuery code

var img = $('#image');
$('#image').on('load', function () {
  img.cropper({
    aspectRatio         : 1,
    scalable            : true,
    rotatable           : true,
    checkOrientation    : true,
    cropBoxResizable    : true,
    dragMode            : 'move',
    minCropBoxWidth     : 346,
    minCropBoxHeight    : 269,
    minContainerHeight  : 400,
    minContainerWidth   : 400,
    minCanvasWidth      : 400,
    minCanvasHeight     : 400,
    viewMode            : 1
  });
  img.cropper("setCropBoxData", { width: "346", height: "269" });
}

It works normal but no changes have been made with my cropbox. It only set its minimum size but not the maximum. Any solutions will help thanks.

• javascript
• html
• jquery
• cropperjs

• 1 Example: fengyuanchen.github.io/cropperjs/examples/… – MaxAlex Commented Jun 4, 2020 at 13:11
• Did you manage to solve this?? I am trying the same though I am using react-cropper. Thank you in advance. – Javier Guzmán Commented Dec 6, 2020 at 11:17

2 Answers 2

You can add this:

autoCropArea: 1,

Description:

• Default: 0.8 (80% of the image)
• It should be a number between 0 and 1.
• Define the automatic cropping area size (percentage).

Source: https://github./fengyuanchen/cropperjs/blob/main/README.md#options

Try adding style="max-height:80vh !important" to the parent container for the cropper-container cropper-bg class.