我有一个图像位于div中。图像几乎总是比div大，这很好，因为溢出是隐藏的。我希望用户能够调整图像的可见部分（在div/窗口内），但阻止他们调整超过div边界的xy坐标。

function Crop() {
    const [imgX, setImgX] = useState(0)
    const [imgY, setImgY] = useState(0)

    return (
        <div>
            <div className="window">
                <img src={image} alt="" transform: `translate(${imgX}px, ${imgY}px)`/>
            </div>
            <div>
               <button onClick={() => {setThumbY(thumbY - 10)}}>UP</button>
               <button onClick={() => { setThumbY(thumbY + 10)}}>DOWN</button>
               <button onClick={() => {setThumbX(thumbX - 10)}}>LEFT</button>
               <button onClick={() => {setThumbX(thumbX + 10)}}>RIGHT</button>
            </div>
        </div>
    )
}

转换是有效的，但它也让我可以将图片向上移动并完全移出div。现在，有没有一种方法可以设置转换的边界，并使这些边界在图片的边缘移过（或即将移过）div的边缘时出现？
或者我在想每张图片都有不同的尺寸，所以也许每张图片都需要基于尺寸的约束，但我似乎也搞不清楚。有没有简单的方法来做到这一点？保持图像的所有边缘在div/窗口内，但仍然允许转换溢出？
假设窗口大小为300 px x，图像大小为500 px，在窗口超出边界之前，窗口两边都有200 px的空间需要处理。如何才能做到这一点？