Javascript 将元素与背景大小对齐：封面

我试图在React JS中实现以下代码。但是，它在调整窗口大小时的行为有所不同。有什么想法吗

function updatePointer() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();

// Get largest dimension increase
var xScale = windowWidth / image.width;
var yScale = windowHeight / image.height;
var scale;
var yOffset = 0;
var xOffset = 0;

if (xScale > yScale) {
    // The image fits perfectly in x axis, stretched in y
    scale = xScale;
    yOffset = (windowHeight - (image.height * scale)) / 2;
} else {
    // The image fits perfectly in y axis, stretched in x
    scale = yScale;
    xOffset = (windowWidth - (image.width * scale)) / 2;
}

pointer.css('top', (target.y) * scale + yOffset);
pointer.css('left', (target.x) * scale + xOffset);

}

小提琴代码：

这是我的密码：

---

在您的正常代码中

目标始终不变，但在您的反应代码中
此.state.left
和
此.state.top
不断变化
也可以尝试在react中添加目标

this.state = {
  target: { x: 184, y: 88 },
  left: 500,
  top: 550,
};

并在setState中使用它

this.setState({
  left: (this.state.target.x * scale) + xOffset,
  top: (this.state.target.y * scale) + yOffset,
});

然后，它将以类似的方式运行。
如何不同？一定要再多一点descriptive@NikhilNanjappa在我的情况下，红点的位置表现得很奇怪。你的期望是什么？@NikhilNanjappa，请尝试调整窗口大小，你会看到区别