單個響應圖像上的多個響應圖像？

我設法讓他們在正確的位置使用下面的代碼。

<div style="position:relative; left: 0; top: 0;"> 
       <img src="images/JCCareas.png" class="img-responsive" style="position:relative; left: 0; top: 0;" alt="Map" /> 
       <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 375px; top: 455px;" alt="target Solihull" title="Solihull"/> 
       <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 320px; top: 250px;" alt="target Sheldon"/> 
       <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 490px; top: 520px;" alt="target Knowle"/> 
       <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 290px; top: 365px;" alt="target Olton"/> 
       <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 575px; top: 390px;" alt="target Hampton-In-Arden"/> 
       <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 560px; top: 80px;" alt="target Coleshill"/> 
       <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 460px; top: 215px;" alt="target Marston Green"/> 
    </div>

地圖正在響應，但地圖上標記並不是我已經嘗試了幾個在CSS的方式，但我真的努力讓這一個工作。

CSS我曾嘗試：

#under-image { 
position: relative; 
display: inline; 
} 
#over-image { 
position:absolute; 
left:33%; 
top:43%; 
max-width: 10%; 
}

任何幫助，將不勝感激。

來源

2016-07-22 Gareth Owen

請提供codepen或小提琴的想法。 –

https://jsfiddle.net/yp7h2ezc/這只是基本代碼 –

你可以在m3diapod.co.uk/jane上看到測試環境 –

嘗試這種方式top & leftposition在%

.img1{left: 28%; 
    position: absolute; 
    top: 49%; 
} 
.img2{left: 32%; 
    position: absolute; 
    top: 87%; 
}

來源

2016-07-22 11:13:02

主要圖像apply css max-width：100％; –

我讓它在jsfiddle https://jsfiddle.net/yp7h2ezc/1/上工作，但它似乎無法在本地版本上運行，目標沒有出現任何想法？ –

單個響應圖像上的多個響應圖像？

回答

相關問題