使用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);
};

我上传了一张图片，将其网址写入<img>标记，点击了一个fancybox并调用了JCrop。但是，当我调整选择框的大小时，出现这个故障：

看起来所选内容显示的是从位置coords.y（coords是当前选择位置）到coords.h+coords.y以及从0到{的变形相同的图像{1}}。如果我选择触摸左角，你会看到整个图像。

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

Answer 1

当您在css中设置max-width时会发生这种情况：

img {
    max-width: 100%
}

只需添加以下规则即可解决问题：

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

其中.image-version是包含<img>的元素#crop-mini的元素的css类。