图片做背景，如何让上面的标注在改变浏览器大小时候跟着改变位置？

Question

现在有一张设备图，用来当作背景图片，但是上面很多关键信息，需要通过样式定位在对应位置，但是当改变浏览器大小后，标注的点位就会发生错乱，如何实现该功能？

要求：
希望图片上的标注在任意窗口大小时，标注都在指定位置，如下：

代码如下：

https://codesandbox.io/s/practical-merkle-5tjpkw?file=/index....

Answer 1

标注的top、left按背景图原图大小百分比进行计算，如原图大小为：1024x1080，标注点的位置为：300x160，那么标注的top=(300/1024x100)%，left=(160/1080x100)%。