Javascript 裁剪时图像居中的问题

我有一个单一的图像裁剪简单的组成部分。但是我对裁剪图像的正确居中有问题

看看我的工作代码：

您将看到图像裁剪效果非常好，裁剪后的图像显示在父图像下方

但是您还将注意到，裁剪后的图像没有正确居中，有时移动得太右，有时太左等等

您还将看到裁剪图像的高度和宽度以及父图像上的标记区域是相同的。还是很难，少了一小部分

正在寻求帮助，谢谢

p.S.无法在堆栈溢出代码段中删除代码，因为它太复杂，并且依赖名为“Jcrop”的npm包。 要测试它，只需单击父图像并移动光标

---

您的图像被移动，因为您正在使用

background-position-x:（（x/width）*100）%

（与y类似）来显示裁剪后的图像，这是错误的

对于移动背景n个像素，不能使用百分比（原因如下：）。 相反，您可以使用：

background-position: -x px

因此，将您的react代码更改为：

const marginLeft = - pos.x + "px";
const marginTop = - pos.y + "px";

---

沙盒：

您的图像被移动，因为您正在使用

background-position-x:（（x/width）*100）%

（与y类似）来显示裁剪的图像，这是错误的

对于移动背景n个像素，不能使用百分比（原因如下：）。 相反，您可以使用：

background-position: -x px

因此，将您的react代码更改为：

const marginLeft = - pos.x + "px";
const marginTop = - pos.y + "px";

---

沙盒：

抱歉，但不理解您的第二个问题，只回答了第一个问题（轮班问题），了解使用背景位置时%和px之间的差异：抱歉，但不理解您的第二个问题，只回答了第一个问题（轮班问题）与了解使用背景位置时%和px之间的差异相关：