位于响应式图像上方的响应式图像

Question

我查看了所有其他类似的线程，但没有一个与我正在尝试做的事情相关。请看这张图片。

这里有 4 个部分。背景和墙上的 3 个恒温器。我想用 css 将每个恒温器放置在墙上，就像你在这张图片中看到的那样，在 <a> 标签内，这样它们就可以点击了，并让它们保持在相同的位置，因为背景图像变大或变小取决于视口大小（响应式）。

对于我的一生，我无法弄清楚如何以响应的方式缩放这些恒温器并保持在相对于背景的位置。有什么想法吗？

这是背景图片：http://i.imgur.com/OXsviSl.jpg

Answer 1

这样的事情应该可以工作。只要您按比例缩放，您就可以使用绝对定位并将所有内容设置为百分比，以便很好地缩放。

HTML

<div class="container">
    <img src="http://i.imgur.com/OXsviSl.jpg">
    <a class="left" href="#"></a>
    <a class="center"></a>
    <a class="right" href="#"></a>
</div>

CSS

.container {
    position: relative;
    margin: 20px;
}
img {
    width: 100%;
}
.left, .right, .center {
    display: block;
    position: absolute;
    background-color: blue;
    top: 42%;
    width: 10%;
    height: 17%;
}
.left {
    left: 18%;
}
.center {
    left: 43%;
}
.right {
    left: 68%;
}

这是jsFiddle

Answer 2

这并不准确，但非常接近 https://jsfiddle.net/nweotw86/

CSS

body{
    background: url("http://lorempixel.com/1200/1200/sports/1/");
    background-size: cover;
    background-repeat: no-repeat;
}
.small{width: 50px; height: 50px; background-color: red;}
.s1{ margin-left: 25%; margin-top: 10%; float: left}
.s2{ margin-left: 25%; margin-top: 10%; float: left}
.s3{ margin-left: 25%; margin-top: 10%; float: left}

HTML

  <div class="small s1">
  </div>
  <div class="small s2">
  </div>
  <div class="small s3">
  </div>

要使它们可点击，只需像这样用<a> 包装：

<a href="#"><div class="small s1"></div></a>