Html 响应图像位于响应图像上方

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

---

这里有四个部分。背景和墙上的3个恒温器。我想用css将每个恒温器放置在墙上，就像你在这张图中看到的一样，在

的内部，类似的东西应该可以工作。只要按比例缩放，就可以使用绝对定位，并使用百分比设置所有内容，以便可以很好地缩放

HTML

这里有一个类似这样的东西应该可以用。只要按比例缩放，就可以使用绝对定位，并使用百分比设置所有内容，以便可以很好地缩放

HTML

这里有一个
这不准确，但非常接近

CSS

HTML



要使它们可点击，只需使用
包装，这并不准确，但非常接近

CSS

HTML



要使它们可点击，只需使用
包装，背景是否会保持比例？（在调整视口大小时进行裁剪和“取消裁剪”）还是要缩放？@thedarklord47我想让它缩放。你看了我的答案了吗/这不是你想要的吗？背景会保持比例吗？（在调整视口大小时进行裁剪和“取消裁剪”）还是要缩放？@thedarklord47我希望它缩放。你看了我的答案了吗/这不是你想要的吗？很接近，但不是。这一切都需要按比例扩展。这很接近，但不是。这一切都需要按比例扩展，而不是保持与背景成比例的位置。这是bg图像：抱歉，忽略这一点。这是一个更新的版本做你想要的。拖动窗口以调整大小。它不会保持与背景成比例的位置。这是bg图像：抱歉，忽略这一点。这是一个更新的版本做你想要的。拖动窗口以调整大小。
<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>

.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%;
}

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}

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