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

Question

我有一个图像（表示为绿色）覆盖在一个框（表示为蓝色）上，并且该图像的尺寸将为loc。发生这种情况时，我需要图像的所有边缘同时完成其变换。

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

在下面的六个示例中，我在转换起源百分比应相交的地方放置了一个红点。

我只是想不通数学。我找到答案最接近的是this question，但这有点含糊，我不确定我是否完全理解答案本身。非常感谢您的帮助，如果我缺少某些东西，将很乐意提供更多详细信息。

Answer 1

摆弄后，我发现公式是：

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