html图片热区如自适应 map标签

Question

想做一个类似这种的功能 ，已知是用HTML 里面的map标签实现。 但是在移动端随着屏幕的变化图片会缩放，导致热区坐标不准。请问怎么做自适应

原效果地址： https://m.lechebang.com/paint...

Answer 1

发生缩放时，js动态取得图片的宽高保存到一个变量变量赋值给area.coords或者area.coords直接乘以缩放比例也可以- -比如：var pecent = current.innerrWidth/某个宽度; area.coords * pecent;