让 fengyuanchen cropper 响应式答案

【问题标题】：Make fengyuanchen cropper responsive让 fengyuanchen cropper 响应式
【发布时间】：2018-07-06 23:57:10
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： javascript jquery html crop cropper

【解决方案1】：

在我看来 minContainerWidth: 568 for mobile 太大了和 minContainerHeight: 320 太小了 - 可以换个尺寸看看。

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

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

【讨论】：

【解决方案2】：

来自 GitHub：

cropper 的大小继承自图片的父元素（wrapper）的大小，所以一定要用可见的块元素来包装图片。

所以，将你的裁剪器元素包装在一个 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 之类的内容，但容器不会响应，因此如果用户旋转手机，它会溢出模式并看起来很糟糕。

【讨论】：