JCrop调整图像大小而不是裁剪 - Javascript

Question

我正在尝试使用JCrop裁剪图像.然而结果是令人沮丧的错误,我不知道为什么.我有一个图像上传器,当有人在图像中选择时,javascript会更改页面上已有图像的来源以匹配新上传的图像.然后我有这个代码:

$('#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;
};

然而,这是发生的事情:

我尝试了很多来解决这个问题,但最终的结果总是一样的.有人有主意吗？谢谢.

Answer 1

我有同样的问题,但我发现,为什么会这样.

在我的css文件中,我有这个代码:

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

当我从此定义中删除宽度和高度时,插件开始正常工作.

Answer 2

我弄清楚了.事实证明,Twitter引导程序模式中的JCrop存在JCrop框宽度的问题.twitter bootstrap模式覆盖了JCrop css中的CSS.不得不在JCrop中修改CSS而不会发生这种情况.