javascript - 裁剪时图像居中问题

Question

我有一个带有单个图像裁剪的简单组件。但是我无法正确居中裁剪的图像。

看看我的工作代码：https ://codesandbox.io/s/sharp-mayer-b371f?from-embed

您会看到图像裁剪效果非常好，裁剪后的图像出现在父图像下方。

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

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

寻求帮助，谢谢！

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

标签： javascriptcssreactjscropjcrop

Answer 1

您的图像被移动，因为您正在使用background-position-x: ((x / width) * 100) %（y 类似）来显示裁剪的图像，这是错误的。

对于移动背景 n 像素，您不能使用百分比（原因如下：https ://stackoverflow.com/a/47329797/4718434 ）。相反，您可以使用：

background-position: -x px

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

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

沙盒：链接