使fengyuanchen图片裁剪工具响应式

Question

https://github.com/fengyuanchen/cropper

我已经成功地在我的项目中实现了剪裁器，但是在移动设备上无法使用，因为图像总是比模态容器（剪裁器在其中）大，而且在移动设备分辨率上无法看到整个图像，因为它溢出了。

我尝试了几种不同的 max-width、width 组合，包括在容器和 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
                        });
                    };

模态框：

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

我想设置一个最大尺寸，当裁剪器的大小小于设置的最大宽度/高度时，它会适应屏幕大小。

谢谢。

- Duarte Andrade

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 */
}

你可以使用类似于window.innerWidth这样的值来设置minContainerWidth，但容器不会自适应大小。因此，如果用户旋转他们的手机，容器将超出模态框并且看起来很糟糕。

- Lex

Answer 2

对我来说，移动设备的minContainerWidth: 568太大了，而minContainerHeight: 320太小了 - 可以尝试交换大小。

如果我拿三星Note 8这样的大手机，它的宽度将是360，高度为740。

此外，您可能希望对img本身和容器进行css或样式设置，使其max-width: 100%。

- Ben Zvi