javascript - 使用 javascript 实现绝对响应位置

Question

我创建了一个代码片段来演示我的问题。

img {
    border:1px solid;
}
.bubble1 {
    width:50px;
    height:50px;
    background:pink;
    opacity:0.8;
    position:absolute;
    top:65px;
    left:45px;
}
.bubble2 {
    width:50px;
    height:50px;
    background:cyan;
    opacity:0.8;
    position:absolute;
    top:135px;
    left:155px;
}
.bubble3 {
    width:50px;
    height:50px;
    background:orange;
    opacity:0.8;
    position:absolute;
    top:190px;
    left:68px;
}
.bubble4 {
    width:50px;
    height:50px;
    background:red;
    opacity:0.8;
    position:absolute;
    top:220px;
    left:213px;
}

<img src="http://i.imgur.com/62GOyK9.png" />
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>

我想在背景上映射 4 个框的位置，我使用绝对位置来完成它。

但问题是它无法响应。在较大/较小的屏幕上，图像会拉伸(stretch)并且映射会偏离目标。如何使用 JavaScript 解决我的问题？

Answer 1

你真的需要一个 JavaScript 解决方案吗？

为什么不能在 CSS 位置样式中使用百分比？

img {
    border:1px solid;
}
.bubble1 {
    width:50px;
    height:50px;
    background:pink;
    opacity:0.8;
    position:absolute;
    top:15%;
    left:10%;
}
.bubble2 {
    width:50px;
    height:50px;
    background:cyan;
    opacity:0.8;
    position:absolute;
    top: 30%;
    right:30%;
}
.bubble3 {
    width:50px;
    height:50px;
    background:orange;
    opacity:0.8;
    position:absolute;
    bottom: 30%;
    left:30%;
}
.bubble4 {
    width:50px;
    height:50px;
    background:red;
    opacity:0.8;
    position:absolute;
    bottom: 20%;
    right:10%;
}

<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>