Cropper: Too much height on initialize

[steefaan]

@fengyuanchen Great job, your cropper is awesome.

I recently updated to 2.2.1 but I noticed this issue already in 1.*

I open the cropper inside a bootstrap modal. Everything works fine but if I load big images (1920x1080 for example) the height of the cropper container explodes. See:

The initialization itself is fine. The cropper formats the image so it fits into the container. Do you have an idea why the height explodes? I overlooked an option maybe?

Here are my options:

        this.$cropper.cropper({
            viewMode: 1,
            aspectRatio: 1,
            responsive: false,
            //minContainerHeight: 350,
            cropBoxResizable: false,
            resizable: false,
            dragMode: 'move',
            built : (function(_this) {
                return function() {
                    $('.fa-spinner', _this.$modal).hide();
                    $('.btn', _this.$modal).attr('disabled', false);
                    _this.$cropper.cropper('setCropBoxData', {
                        width: 250, height: 250
                    });
                }
            })(this)
        });

[fengyuanchen]

Limit the size of the image before start a Cropper:

.modal-body img {
  max-width: 100%;
}

[steefaan]

Perfect, thanks :)

[goneale]

Thank you so much for posting this steefaan. I spent about an hour looking for a fix for this, a big problem loading the cropper on an iPhone 4 and a large image.

I think others might struggle here and might be worth highlighting in the docs.

[ghost]

This should be in the docs.

[caleuanhopkins]

+1

[fengyuanchen]

@ericprieto and @caleuanhopkins Just added it to here. Thanks~