Сделать фенюаньчэнь кроппер отзывчивым

Question

https://github.com/fengyuanchen/cropper

Я успешно применил кроппер в своем проекте, но его нельзя использовать на мобильном устройстве, потому что изображение всегда больше модального контейнера (кроппер находится внутри модального окна), и я не вижу все изображение на мобильном телефоне, потому что оно переполняется

Я попробовал несколько комбинаций max-widths, widths, на контейнерах, на теге img, но не могу этого сделать, я установил:

minContainerWidth: 568, minContainerHeight: 320

Если я уберу его, он будет работать, но по умолчанию будет 100x200, что слишком мало даже для мобильных устройств и очень мало для ПК

Вот мои настройки:

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>' +
        '';

Я хочу установить максимальный размер, и чтобы материал кадрирования адаптировался к экрану, когда он меньше установленной максимальной ширины / высоты.

Спасибо

Answer 1

Из GitHub:

Размер обрезки наследуется от размера родительского элемента изображения (оболочки), поэтому не забудьте обернуть изображение видимым элементом блока.

Итак, оберните элемент обрезки в div:

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

Затем в вашем 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 */
}

Вы можете установить minContainerWidth с чем-то вроде window.innerWidth, но контейнер не будет реагировать, поэтому, если пользователь повернет свой телефон, он выйдет за пределы модального окна и будет выглядеть ужасно.

Answer 2

Мне кажется, что minContainerWidth: 568 для мобильных устройств слишком велик, а minContainerHeight: 320 слишком мал - возможно, измените размеры и посмотрите.

если я возьму Samsung Note 8, который является большим телефоном, он будет 360 в ширину и 740 в высоту

также вы можете захотеть использовать CSS или стиль для самого img, а контейнер будет иметь максимальную ширину: 100%