javascript - 使 fengyuanchen 裁剪器响应式

Question

https://github.com/fengyuanchen/cropper

我在我的项目上成功实现了裁剪器，但它在移动设备上不可用，因为图像总是比模态容器大(裁剪器位于模态内部)，并且我无法在移动资源上看到所有图像，因为它溢出了

我尝试了容器上、img 标签上的最大宽度、宽度的几种组合，但无法做到这一点，我已经设置了:

最小容器宽度:568，最小容器高度:320

如果我删除它，它可以工作，但默认值为 100x200，即使在移动设备上也太小，而在 PC 上则非常小

这是我的设置:

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
                        });
                    };

莫代尔:

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:

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.

因此，将您的cropper元素包装在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 */
}

您可以使用 window.innerWidth 等设置 minContainerWidth，但容器不会响应，因此如果用户旋转手机，它将溢出到超出范围莫代尔并且看起来很糟糕。