Question

我在我的项目中成功实现了裁剪器，但它在移动设备上无法使用，因为图像总是比模态容器大（裁剪器在模态内）并且我无法在移动设备上看到所有图像，因为它溢出

我在img标签上尝试了容器上的最大宽度，宽度的几种组合但是不能这样做，我设置了：

minContainerWidth：568， minContainerHeight：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：

裁切器的大小继承自图像的父元素（包装器）的大小，因此请确保使用可见的块元素包装图像。

因此，将您的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 */
}

您可以将minContainerWidth设置为window.innerWidth之类的内容，但是容器不会响应，因此，如果用户旋转手机，它将溢出模式，看起来很恐怖。

Answer 2

在我看来，minContainerWidth：568对于手机来说太大了和minContainerHeight：320太小了 - 也许可以切换尺寸并查看。

如果我拿三星note 8这是一款大手机，它将是360宽和740高

你也可以想要将img本身和容器设为css或样式为max-width：100％

使fengyuanchen cropper响应

2 个答案: