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

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>