Javascript 图像上的响应元件定位

我正在编写一个组件，它允许用户在图像上创建可单击的区域，这些区域是矩形，然后在查看器中表示为锚定。编辑器工作正常，元素位置正确，但当查看器加载时，锚元素的位置不再正确

查看器呈现以下html模板

<div *ngIf="config.element.question.title" [froalaView]="config.element.question.title" [style.color]="config.survey.theme.colors.answerTextColor"
  class="C(#1d3a4e) Fz(16px) Fw(700) Fs(n) Td(n) Mt(0) Mx(0) Mb(3px) Pt(0) Px(0) Pb(3px) Bd(n) Pos(r) W(100%)"></div>
<div class="Pos(r) Maw(100%) H(a) Bgc(#ffffff) Pe(n)">
  <img [attr.src]="config.element.question.imageUrl" class="Pos(r) T(0) B(0) Start(0) End(0) Maw(100%) Pe(n)" />
  <div class="Pos(a) T(0) B(0) Start(0) End(0) Pe(n)">
    <a *ngFor="let map of config.element.question.imageMaps" class="imageMap Pos(a) Pe(a)" [style.top.px]="map.top" [style.left.px]="map.left"
  [style.width.px]="map.width" [style.height.px]="map.height" [attr.href]="map.link" [attr.target]="map.target">
    </a>
  </div>
</div>

imageMaps

数组看起来像这样的

[{“id”：“d65843cd-5668-4578-a367-e2793f356b7e”，“top”：165，“left”：162，“width”：191，“height”：71}

（注意：

链接和
目标是可选的）

我认为问题在于，图像在编辑器中的大小（较小）与查看器中的大小（较大）不同，在预览中又变大了，因此，随着图像大小的改变，覆盖层仍保持在相同的位置

值得注意的是，在编辑器和查看器中，左侧有一个面板，预览中没有该面板，编辑器中有一些填充和边距元素

我不太确定如何调整每个叠加元素相对于图像大小和比例的位置和大小，因此如果有人能帮忙，我将不胜感激。
您需要使用映射到锚的x-y坐标的百分比（以及百分比宽度/高度）-请看这个：如此愚蠢的问题（可能）但是如何将x/y坐标转换为图像的百分比呢？NM说，这是一个愚蠢的问题，所以我想计算x/y除以容器宽度乘以100，将得到我的位置作为百分比，宽度也是如此，然后指定锚定位置和大小作为百分比。我将尝试一下并更新我的发现。