響應式圖像定位在響應式圖像上

我已經看過所有其他類似的線程，沒有一個與我正在嘗試做的事情有關。請看這張圖片。響應式圖像定位在響應式圖像上

有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

響應式圖像定位在響應式圖像上

回答

相關問題