计算两个重叠元素的变换原点

Question

我有一个图像（表示为绿色）覆盖一个框（表示为蓝色），并且图像的大小将 transform: scale()ing。当发生这种情况时，我需要图像的所有边缘同时完成它们的转换。

为此，我需要使用 JavaScript 根据图像位于边界框上方的位置计算 transform-origin。假设我知道 getBoundingClientRect() 为两个元素提供的所有坐标。

在下面的六个示例中，我在变换原点百分比应相交的位置放置了一个红点。

我只是想不出到达那里的数学。我最接近找到答案的是 this question，但它有点含糊，我不确定我是否完全理解答案本身。我将不胜感激，如果我遗漏了什么，我会很乐意提供更多详细信息。

Answer 1

折腾了一下，得出公式为：

(
  (box.left - image.left) /
  (image.width - box.width)
) * 100

Calculating transform-origin of two overlapping elements