jcrop 在模态对话框中显示图像以解决裁剪大小问题

Posted 2023-02-25

【中文标题】jcrop 在模态对话框中显示图像以解决裁剪大小问题

【英文标题】：jcrop show image in modal dialog for cropping size issue

【发布时间】：2015-04-29 09:15:15

【问题描述】：

我在模态对话框中显示用户上传的图像。在此图像上，我正在初始化 JCrop 以裁剪图像。

问题是我无法在对话框中正确设置图像，它适用于尺寸（尺寸）小于对话框大小的图像，但对于大于对话框大小的图像，图像会超出对话框。

我尝试使用 boxHeight 和 boxWidth 但这会使图像无响应，并且对于较小尺寸的屏幕，图像会退出对话框。

基本上，我正在寻找在对话框中显示图像的通用解决方案，无论图像大小如何，以便它在对话框中正确显示。

【参考方案1】：

使用它可能会有所帮助：

<div class="modal-body" style="overflow: auto; >
......preview here ....
</div>

【讨论】：

不鼓励在 SO 上仅提供代码答案，但感谢您的宝贵时间。请阅读How to Answer。

【参考方案2】：

最简单的解决方案是使用 jcrop 选项在固定大小的 div 中初始化 jcrop，如下所示：

boxWidth: 500,
boxHeight: 500,