Question

我正在使用JCrop裁剪照片（显然），我的问题是我可以点击图片（启动模态），宽度和高度与我为点击的图片设置的宽度和高度不同。

一个例子是：

// function call, to pass message to telegram bot
function populateAndSend() {
    var _url = "..." + var1 + var2 + var3

    return $.ajax({
        type: 'get',
        url: _url
    })
};
// form validation
$('#tryitForm').validate({
    rules: {
        xxx
    },
    submitHandler: function (form) {
        populateAndSend();
        return false;
    }
});

但是当它加载到模态中时，JCrop会添加一个内联样式：

$("#avatar-photo").html("<img src='" + replace + "' alt='Avatar' class='w3-center w3-round w3-border' style='height: 280px; width: 400px;' id='enlarged-photo'>

无论如何都要阻止JCrop这样做，因为它会使模式中的图像太小。

我希望这可以解释我的问题。

谢谢！

更新

我已将图像大小调整问题与此隔离：

<img src="image.jpg" alt="Avatar" class="w3-center w3-round w3-border" style="height: 152px; width: 152px; display: none; visibility: hidden;" id="enlarged-photo">

我现在唯一的问题是如何阻止JCrop为样式设置高度和宽度？

Answer 1

我相信这可能是因为代码互相操纵。

在你的JS中：

style='height: 280px; width: 400px;'

在你的HTML中：

style="height: 152px; width: 152px;

两者都试图在高度和宽度上对图像进行估价。删除其中一个。

Answer 2

修复它，它是一个boxWidth和boxHeight问题

JCrop为图像添加高度和宽度

2 个答案: