Javascript 如何"；胶水“；要调整图像大小的元素？

我有

宽度为100%的图像；高度：自动和此图像上的其他元素的
位置：绝对；左：x；顶部：x（这是一个游戏）

当我调整页面大小时，元素没有移动（它弄乱了），所以我写了以下内容：

// on start
var img = document.getElementById('world_image'); 

startImageSize.w = img.clientWidth;
startImageSize.h = img.clientHeight;
actImageSize.w = startImageSize.w;
actImageSize.h = startImageSize.h;

// on resize

var img = document.getElementById('world_image'); 

actImageSize.w = img.clientWidth;
actImageSize.h = img.clientHeight;

// update (each tick)

$("#cr_" + this.ID).animate({
    "left" : (this.x - ((startImageSize.w - actImageSize.w) / 2)) + "px",
    "top" : (this.y - ((startImageSize.h - actImageSize.h) / 2)) + "px"
}, speed);

但它没有正常工作，下面是一个简短的GIF，表示正在发生的事情：


“红点”的移动速度比它应该的快

//埃迪！与整个项目打交道

我做错了什么？
我不会尝试在JS中重新定位它们-它很慢，会使调整大小变得很麻烦，并且会占用实际运行游戏所需的javascript周期，而且无论如何都没有必要。为什么不将圆点的位置设置为%，如下所示：


.map{
背景：#68B1FF url（'https://upload.wikimedia.org/wikipedia/commons/5/5e/BlankMap-World-Sovereign_Nations.svg’）中间顶部不重复；
背景尺寸：包含；
位置：相对位置；
身高：0；
填充顶部：51.2%；/*原始地图图像为1104 x 566px。这是高宽比，表示高度与宽度的百分比*/
宽度：100%；
}
.马克{
边界半径：50%；
宽度：1vw；/*这些允许标记与地图缩放*/
高度：1vw；
背景：红色；
最小高度：8px；
最大高度：16像素；
最小宽度：8px；
最大宽度：16px；
位置：绝对位置；
}
我不会尝试在JS中重新定位它们-它很慢，会使调整大小变得很麻烦，并且会消耗实际运行游戏所需的javascript周期，而且无论如何都没有必要。为什么不将圆点的位置设置为%，如下所示：


.map{
背景：#68B1FF url（'https://upload.wikimedia.org/wikipedia/commons/5/5e/BlankMap-World-Sovereign_Nations.svg’）中间顶部不重复；
背景尺寸：包含；
位置：相对位置；
身高：0；
填充顶部：51.2%；/*原始地图图像为1104 x 566px。这是高宽比，表示高度与宽度的百分比*/
宽度：100%；
}
.马克{
边界半径：50%；
宽度：1vw；/*这些允许标记与地图缩放*/
高度：1vw；
背景：红色；
最小高度：8px；
最大高度：16像素；
最小宽度：8px；
最大宽度：16px；
位置：绝对位置；
}

基本上你不应该设置动画：）你能添加一个指向JSFIDLE/codepen示例的链接吗？使用css而不是动画不会改变任何东西@hughes sure，我会在一段时间内上传整个项目，基本上你不应该设置动画：）你能添加一个链接到一个JSFIDLE/codepen示例吗？使用css而不是动画不会改变任何事情@hughes当然，我会在一段时间内上传整个项目