JCrop resizing the image not cropping - Javascript

Question

I am trying to use JCrop to crop an image. However the results are frustratingly wrong and I am not sure why. I have an image uploader that when someone selects in image a javascript changes the source of an image already on the page to match the newly upload image. I then have this code:

$('#myForm').ajaxForm({
    dataType: 'json',
    success: function (result) {
        $("#image-editor-preview img")
            .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
                        .Jcrop({
                            aspectRatio: 1,
                            setSelect: [100, 100, 50, 50],
                            minSize: [160, 160],
                            maxSize: [160, 160],
                            onChange: setCoords,
                            onSelect: setCoords
                        });
    }
});

var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
    x = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};

However this is what happens:

I have tried tried quite a bit to fix this but the end results are ALWAYS the same. Anyone have any ideas? Thanks.

Answer 1

I had the same problem, but I found, why it happens so.

In my css file I had this code:

img {
    width:  100%;
    height: auto;
    border: none;
} 

When I removed width and height from this definition, plugin started working correctly.