缩放图像时移动绝对红点

Question

我有一个似乎无法解决的小问题。我有一个在输入范围内缩放的图像。我从100％的宽度变为150％的宽度。

问题是我在这张图片上绝对位置中的div，当我缩放图像时必须更改位置。

我该怎么做？

这里是一个沙盒来说明我的问题

Answer 1

注意，点是img容器的子元素，而不是图片本身。移动width，在容器上添加position: relative。例如：https://codesandbox.io/s/blissful-faraday-qyhmx?file=/src/components/Carte/Carte.js

而且，简化所面临的问题也很有帮助。一个点，没有工具提示等，删除重复的代码。分而治之。您会度过更愉快的时光