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

Question

我正在尝试在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);

}

小提琴代码：http://jsfiddle.net/Tyriar/ypb5P/1/

这是我的代码：

Answer 1

在您的正常代码中，target始终保持不变，但在您的反应代码中this.state.left和this.state.top会不断变化 尝试添加目标反应。

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,
});

然后它将以类似的方式表现。