我目前正在使用 weblflow 构建一个网站，但遇到了一个问题，这里有人可能可以帮助我解决。这是我在多个项目中遇到的问题，所以我非常感谢有人的帮助。
基本上，如果您有一个全屏尺寸的图像（设置为背景图像，100vw 和 100vh），然后想要将标题/标签放在该图像顶部，指向该图像中的特定部分，我如何获取这些标题/标签当有人调整浏览器大小时总是随着图像移动？
至于现在，我对标题/标签使用了绝对定位，并使用％边距将它们定位在我希望它们指向图像上的位置。我已将图像本身设置为相对位置。然而，使用该解决方案，在调整浏览器大小时，标题/标签永远不会完全继续指向图像上的同一位置。
我认为主要问题是，当有人只更改浏览器的宽度时，图像会变小（例如），因为它会保持其比例。垂直方向上，标题/标签不会移动，因为高度没有改变，只是浏览器的宽度发生了变化。因此，水平方向仍然没问题，但垂直方向的标题现在已关闭，因为由于调整浏览器宽度而导致图像变小。所以我想我确实知道为什么它不起作用，但我不知道如何解决这个问题。如果有人对此有解决方案，请告诉我。
举个例子：如果您打开此页面：http://nestin.bold-themes.com/classy/向下滚动到“真实值始终在内部”部分，有一个带有 5 个编号标签的图像，无论您如何调整浏览器大小，这些标签/数字都会保留在图像的同一位置。我经常在网站上看到这种情况。这是如何实现的？
将不胜感激任何帮助！
您创建一个父包装器，将其放入图像和所有 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
