响应式图像定位在响应式图像上

我已经看过所有其他类似的线程，没有一个与我正在尝试做的事情有关。请看这张图片。响应式图像定位在响应式图像上

有4个部分在这里。背景和墙上的3个恒温器。我想用css将每个恒温器放置在墙上，就像您在此图像中看到的那样，并且在<a>标记内部可以点击，并使它们保持在与背景图像变大或变小的位置相同的位置，具体取决于视口尺寸（响应）。

对于我的生活，我无法弄清楚如何以适应性的方式缩放和保持这些恒温器各自对应的背景。有任何想法吗？

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

来源

2015-12-12 lemonsevens15

是后台要留比例？（在视图大小调整时裁剪和“裁剪”）还是会扩大？ – thedarklord47

@ thedarklord47我希望它可以扩展。 – lemonsevens15

你看我的答案/是不是你想要的？ – thedarklord47

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

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

来源

2015-12-12 00:50:04 thedarklord47

这并不保持与bg成比例。这里是bg图片：http://i.imgur.com/OXsviSl.jpg – lemonsevens15

抱歉忽略这一点。这里是一个更新的版本，在做你想做的事情。拖动窗口来调整大小。 http://jsfiddle.net/L2L31e0s/6/ – thedarklord47

更新了我的回答 – thedarklord47

这是不准确，但八九不离十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>

来源

2015-12-12 00:54:43

这很接近，但没错。这一切都需要按比例扩展。 – lemonsevens15

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

响应式图像定位在响应式图像上

回答

相关问题