Javascript 需要图像在两个div中处于相同的位置

我需要下面两个div中的图像处于相同的位置，即使另一个div改变高度或宽度。我试着从px计算top和left到%，但仍然不起作用。我也尝试过计算其他div大小的百分比，并在其他div中添加或删除图像的顶部和左侧，但仍然没有成功

要检查问题，请在第一个div内拖动图像，然后单击submit。现在，底部div内的图像应该与上面的div处于相同的位置，顶部和左侧的距离相同

请帮忙。谢谢

这是小提琴：

var zoomLevel=1；
$（“#myimage”）.draggable({
开始：函数（）{
},
停止：函数（）{
}
});
$（“#保存”）。单击（函数（）{
var topcss=$（'#myimage'）.css（'top'）；
var leftcss=$（'#myimage'）.css（'left'）；
var transformcss=zoomLevel；
topcss=topcss.replace（'px'，''）；
leftcss=leftcss.replace（'px'，''）；
topcss=parseInt（topcss）；
leftcss=parseInt（leftcss）；
var parentWidth=$（'#dragDiv'）。outerWidth（）
var parentHeight=$（'#dragDiv'）.outerHeight（）
log（'leftcss'，leftcss'，width'，parentWidth）
console.log（'topcss'，topcss'，height'，parentHeight）
var percentLeft=leftcss/parentWidth*100；
var percentTop=topcss/parentHeight*100；
console.log（'percentLeft'，percentLeft'，percentTop'，percentTop）
transformcss=parseFloat（transformcss）.toFixed（2）；
var结果={
“top”：topcss，
“left”：leftcss，
“percentTop”：percentTop，
“percentLeft”：percentLeft，
“parentWidth”：parentWidth，
“parentHeight”：parentHeight，
“转换”：“缩放（“+transformcss+”）
};
var output=JSON.stringify（结果）；
console.log（'output'，output）
$（“#newimg”）.css({
“left”：leftcss
});
$（“#newimg”）.css({
“top”：topcss
});
});
.transperentimage{
宽度：497px；
高度：329px；
边框：1px纯黑；
保证金：0自动；
}
#比基姆{
宽度：651px；
身高：431px；
边框：1px纯黑；
保证金：0自动；
}
img{
边框：2倍纯红；
填充：3倍；
宽度：自动；
高度：自动；
光标：移动；
最大高度：180像素；
}
#纽伊姆{
位置：绝对位置；
最大高度：180像素；
宽度：自动！重要；
高度：自动！重要；
最大宽度：100%！重要；
}

拯救
对于您的
新img
，父项必须有一个
相对的
位置。这样，
绝对
定位将相对于父对象，而不是
主体

具有
位置的元素：绝对相对于最近定位的祖先定位（而不是相对于视口定位，如固定）

考虑以下代码


$（函数（）{
var zoomLevel=parseFloat（1-（$（“#dragDiv”）.outerWidth（）/$（“#bigimg”）.outerWidth（））.toFixed（2））；
函数日志（str）{
如果（$（“.log”）.length）{
$（“.log”）.html（str）；
}否则{
$("", {
类：“日志”
}).html（str）.appendTo（“body”）；
}
}
函数getPos（el）{
var PAR＝$（EL）.PARTUNTY（）；
var pos={
顶部：parseInt（$（el）.css（“顶部”），
左：parseInt（$（el）.css（“左”），
缩放：“缩放”（+（1+zoomLevel）+”），
PraveSt:Par .OutWithTh（）
Palo.Po.OutHead（）
};
pos['perLeft']=parseFloat（（pos.left/pos.parWidth）.toFixed（2））*100；
pos['perTop']=parseFloat（（pos.top/pos.parHeight）.toFixed（2））*100；
返回pos；
}
$（“#myimage”）.draggable({
遏制：“家长”，
拖动：函数（e、ui）{
日志（“左：“+ui.position.Left+”，顶部：“+ui.position.Top”）；
},
开始：函数（）{
//坐标（“#myimage”）；
},
停止：函数（）{
//坐标（“#myimage”）；
var p=getPos（本）；
$（this.attr（“title”，JSON.stringify（p））；
}
});
$（“#保存”）。单击（函数（）{
var result=getPos（$（“#myimage”）；
var output=JSON.stringify（结果）；
var nLeft=Math.round（result.perLeft*（1+zoomLevel））+“%”；
var nTop=Math.round（result.perTop*（1+zoomLevel））+“%”
日志（输出、nLeft、nTop）；
$（“#newimg”）.css({
左：左，
顶部：nTop
});
var p=getPos（$（“#newimg”）；
$（“#newimg”）.attr（“title”，JSON.stringify（p））；
});
});
.transperentimage{
宽度：497px；
高度：329px；
边框：1px纯黑；
保证金：0自动；
}
#比基姆{
宽度：651px；
身高：431px；
边框：1px纯黑；
保证金：0自动；
位置：相对位置；
}
img{
边框：2倍纯红；
填充：3倍；
宽度：自动；
高度：自动；
光标：移动；
/*最大宽度：100%*/
最大高度：180像素；
}
#纽伊姆{
位置：绝对位置；
最大高度：180像素；
宽度：自动！重要；
高度：自动！重要；
最大宽度：100%！重要；
}
.日志{
字体大小：11px；
字体系列：“Arial”；
位置：绝对位置；
顶部：3px；
左：3件
}

拯救

$（函数（）{
$（“#logo1”）。可拖动({
遏制：“家长”，
拖动：函数（）{
}
});
});
函数setpos（）{
var image1_w=$（“#logo1”）.width（）；
var div1_w=$（“.div1”）.width（）；
var image2_w=$（“#logo2”）.width（）；
var div2_w=$（“.div2”）.width（）；
var image1_h=$（“#logo1”）.height（）；
var div1_h=$（“.div1”）.height（）；
var image2_h=$（“#logo2”）.height（）；
var div2_h=$（“.div2”）.height（）；
var div1_aw=div1_w-image1_w；
var div2_aw=div2_w-image2_w；
var div1_ah=div1_h-image1_h；
var div2_ah=div2_h-image2_h；
var div
var xPos=$（'#logo1'）.css（'left'）；
var yPos=$（'#logo1'）.css（'top'）；
var比率w=parseFloat（div1_aw）/parseFloat（div2_aw）；
var比率=parseFloat（div1\u ah）/parseFloat（div2\u ah）；
//让act=1.39；
var div2_nw=浮动汇率（xPos）/比率w；
var div2_nh=浮动汇率（yPos）/比率_h；
$（“#posX”）.text（'Div left:'+div2_nw）；
$（“#posA”）.text（'Div Top:'+div2_nh）；
$（“#logo2”）.css({