javascript - 使用 JCrop 的图形故障

Question

我在实现 Jcrop 时遇到了严重的问题。我将展示有关 Jcrop 实现的代码:

$("#crop-mini").Jcrop({
        onChange : updatePositions,
        onSelect : updatePositions,
        boxWidth : 500,
        boxHeight : 400,
        keySupport : false,
        setSelect : [0, 0, 999999, 999999],
        minSize : [10, 10]
});

其中 #crop-mini 是 <img>包含图像的标签。 updatePositions只是一个函数...更新选择位置。非常简单:

function updatePositions(coords)
{
    $(".x").val(coords.x);
    $(".y").val(coords.y);
    $(".w").val(coords.w);
    $(".h").val(coords.h);
};

我上传一张图片，将其url写入<img>标记，触发 fancybox 并调用 JCrop。然而，当我调整选择框的大小时，繁荣，出现了这个故障:

看起来所选内容显示了从位置 coords.y 变形的相同图像。 ( coords 是当前选择位置)到 coords.h+coords.y ，以及来自 0至coords.w 。如果我将选区触摸左 Angular ，您将看到整个图像。

顺便说一句，裁剪按预期工作，并且正在传递真实坐标，因此我碰巧认为问题出在演示文稿中，而不是处理中。我做错了什么吗？

Answer 1

当您有 max-width 时，就会发生这种情况在你的CSS中设置:

img {
    max-width: 100%
}

只需添加以下规则即可修复它:

.image-version img {
    max-width: none;
}

哪里.image-version是元素包装 <img> 的 css 类id #crop-mini .