将文本定位在图像上，使其始终指向图像中的同一位置，即使在调整浏览器大小时也是如此

Question

我目前正在使用 weblflow 构建一个网站，但是运行遇到了一个问题，这里有人可能会帮助我解决。这是我在多个项目中遇到的问题，所以非常感谢有人的帮助。

基本上，如果您有一个全屏尺寸的图像（设置为背景图像，100vw 和 100vh），然后想将 headings/labels 放在该图像的顶部，指向该图像中的特定部分，如何当有人调整浏览器大小时，我会得到这些 headings/labels 总是随图像移动吗？

至于现在，我对 headings/labels 使用了绝对定位，并使用 % 边距将它们定位在我希望它们在图像上指向的位置。我已将图像本身设置为相对位置。但是，使用该解决方案，headings/labels 在调整浏览器大小时永远不会准确地继续指向图像上的同一位置。

我认为主要问题是，当有人只更改浏览器的宽度时，图像会（例如）变小，因为它会保持比例。垂直 headings/labels 不要移动，因为高度没有变化，只是浏览器的宽度发生了变化。所以水平方向它仍然很好，但垂直方向标题现在关闭，因为由于调整浏览器的宽度，图像变小了。所以我想我确实知道为什么它不起作用，但我不知道如何解决这个问题。如果有人对此有解决方案，请告诉我。

例如：如果您打开此页面：http://nestin.bold-themes.com/classy/ 并向下滚动到“真正的价值总是在里面”部分，无论您如何调整浏览器大小，都会有一张带有 5 个编号标签的图像，这些 labels/numbers 留在图像的同一位置。我经常在网站上看到这个。这是如何实现的？

非常感谢任何帮助！

Answer 1

您可以通过百分比定位来实现这一点。例如，

在parentdiv

position: relative;

在childdiv

position: absolute;
top: 50%;
left: 30%;

现在 child div 将始终将自己定位在距 parent div 顶部 50% 和左侧 30% 的位置。 parent div 的大小无关紧要。我建议你拿一个 parent div 把图片和文字放在里面。

您的示例网站也使用了这种技术。 check their code here

另一种技术是使用 HTML canvas。但是对于像这样简单的事情，HTML canvas 就太过分了。

Answer 2

您创建一个父包装器，将图像和所有 div 放入其中。父级是相关的，div 是绝对的。

这是一个小演示。

* {
  box-sizing: border-box;
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
  width: 100%;
}

.parent {
  position: relative;
}
.parent .box {
  position: absolute;
  width: calc(1.6vw + 10px); height: calc(1.6vw + 10px);
  border-radius: 50%;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.parent .box.window {
  top: 0;
  left: 39%;
}
.parent .box.light {
  top: 16%;
  left: 46%;
}
.parent .box.pool {
  top: 90%;
  left: 50%;
}
.parent .box.plant {
  top: 55%;
  left: 3%;
}

<div class="parent">
  <div class="box plant">1</div>
  <div class="box window">2</div>
  <div class="box light">3</div>
  <div class="box pool">4</div><img src="https://images.pexels.com/photos/4075088/pexels-photo-4075088.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""/>
</div>

https://codepen.io/ShadiMouma/pen/BaKYyYX?editors=1100

将文本定位在图像上，使其始终指向图像中的同一位置，即使在调整浏览器大小时也是如此

Positioning text over an image so that it always points to the same spot in the image even when resizing the browser

css

position

image