以不同的屏幕尺寸动态更改div内部的位置

Question

我正在创建一个Ionic 2应用程序，用户必须在屏幕中选择一些点，这些坐标的值将用于另一个不同大小的屏幕。我试图使用trhee / cross乘法规则，但它给了我一个不够的近似值。

this site

这就是我正在制作的内容，使用在一个屏幕上看起来不错的值，并在另一个不同大小的屏幕上使用相同的百分比：

makePosition() {
  let canvasRect = document.getElementById("shapeBoard").getBoundingClientRect();
  let top = this.elementHead.nativeElement.style.top; 
  let left = this.elementHead.nativeElement.style.left; 
  this.elementHead.nativeElement.style.top = canvasRect.top + (canvasRect.height * 1.931634728536)/100 + "px";
  this.elementHead.nativeElement.style.left = canvasRect.left + (canvasRect.width * 48.738582882804224)/100 + "px";
} 

html：

有没有办法动态更改圆形div位置，使其始终位于图像上的相同位置？

Answer 1

我希望这5个步骤能为您提供准确的定位：

1）相对于图像所在的容器制作圆圈位置。

2）确保图像宽度为其容器的100％。

3）以百分比形式存储顶部和左侧位置。

4）将顶部和左侧设置为百分比％而不是px。

5）确保图像没有设置边框或边距，其容器没有边框或填充。

左侧和上方的百分比将自动调整，无需任何JavaScript，也可以调整屏幕大小。

此外，当您设置顶部和左侧时，它将相对于圆的顶部和左侧。您可能需要通过将圆的一半宽度的负边距添加到圆圈来将圆圈居中到给定的精确上/左百分比。