Graphical glitch using JCrop

Question

I'm having serious troubles implementing Jcrop. I'll show the code regarding Jcrop implementation:

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

Where #crop-mini is the <img> tag containing the image. updatePositions is just a function that... updates the selection positions. Pretty straightforward:

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

I upload an image, write its url into the <img> tag, fire a fancybox and call JCrop. However, when I resize the selection box, boom, this glitch appears:

It looks like the selected content shows the same image being deformed from positions coords.y (coords is the current selection position) to coords.h+coords.y, and from 0 to coords.w. If I put the selection touching the left corner, you would see the whole image.

By the way, cropping works as expected, and the real coordinates are being passed, so I happen to think that the problem is within the presentation, not the processing. Did I do anything wrong?

Answer 1

This happens when you have max-width set in your css:

img {
    max-width: 100%
}

Just add the following rule to fix it:

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

Where .image-version is a css class of the element wrapping <img> with id #crop-mini.