3

https://github.com/fengyuanchen/cropper

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

我尝试了几种最大宽度、宽度、容器、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>' +
        '';

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

谢谢

4

2 回答 2

2

来自 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，但是容器不会响应，所以如果用户旋转他们的手机，它会溢出模式并且看起来很糟糕。

于 2020-07-22T23:14:39.573 回答
0

在我看来，移动设备的 minContainerWidth: 568 太大了，而 minContainerHeight: 320 太小了——也许换个尺寸看看。

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

您也可能希望将 img 本身和容器设置为 css 或样式为 max-width: 100%

于 2018-01-29T11:09:05.297 回答