Javascript 在一个div中放大和缩小

我想在jQuery站点中实现放大和缩小选项。这个网站使用了很多元素（甚至像其他元素中的一个），一切都很好，直到我尝试添加一个缩放选项。我尝试的唯一方法是使用

-webkit transform:scale（0.5）

，它完全破坏了我所有的拖拽功能。手柄有错误的夹子盒，几乎无法使用。而且，整个页面都被这个

transform

的东西弄得一团糟

当我使用浏览器内置的

Ctrl

+

+/-

选项时，它看起来好多了。它的工作原理就像我希望它工作一样，但是这个站点上可拖动的区域并不是唯一的东西。我所在区域周围的用户界面也越来越小/越来越大

我正在寻找一种在我的一个div上放大和缩小的解决方案。我只使用jQuery（因为我的站点结构的限制），所以我不会向它添加任何画布区域

如果需要更多信息，请询问。我试图提及每一个重要的细节

编辑：这里有一个屏幕截图供您了解我的页面结构：

网站上的所有UI元素都是

固定的

，可拖动的中心区域是

绝对的

尝试使用 JS:-

$(document).ready(function() {
    $("#element").click(function(evt) {
        $(this).zoomTo({targetsize:0.75, duration:600});
        evt.stopPropagation();
    });
});

如果希望在鼠标悬停时缩放该图像：

$（文档）.ready（函数（）{ $（#div img'）。悬停(

}))

​或者，如果使用放大和缩小按钮，您也可以这样做：

$（“#缩放”）。单击（缩放（））

$（“#ZoomOut”）。单击（ZoomOut（））

函数缩放（事件）{

},

函数ZoomOut（事件）{

---

}

我正在放大一个

div及其全部内容，而不是它的宽度，因为它会破坏我的可拖动区域，所以这不是我想要的。我将你的答案与我在网上找到的另一个解决方案混合在一起，得到了一个bug，但到目前为止，原型仍在工作。我尝试了太多的方法来实现这一点。不幸的是，Zoomooz.js正在使用
转换
东西，并提供相同但动画的输出。这也不是我想要的。
function() {
    $(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
    $(this).animate({ 'zoom': 1 }, 400);
});

$("#div img").width(
    $("#div img").width() * 1.2
);

$("#div img").height(
    $("#div img").height() * 1.2
);

$("#div img").width(
    $("#imgDtls").width() * 0.5
);

$("#div img").height(
    $("#div img").height() * 0.5
);