如何將3張圖片放在另一張圖片上，並保持僅使用CSS的響應度？

Question

我有3個圖像我想定位在彼此「中心」的頂部，並希望保留一個響應式設計。

目前，我必須在調整窗口大小的過程中使用js來正確定位圖像。有沒有一個純CSS的方式來做到這一點？

這裏是我工作的jsfiddle。

https://jsfiddle.net/zt2Lca7v/

<div id="box"> 
<img id="back" src="http://esurf.us/x/csstry001/back.png" class="img-responsive" /> 
<img id="front" src="http://esurf.us/x/csstry001/front.png" class="img-responsive" />  
<img id="vline" src="http://esurf.us/x/csstry001/vline.png" class="img-responsive" />  
</div> 

body {background-color:black;margin:0;padding:0;} 
#box{position:relative;display:block;width:100%;margin:0 auto;} 
#back 
{ 
    width:100%; 
    display:block; 
    margin: 0 auto; 
    position:absolute; 
} 
#front 
{ 
    display:block; 
    position:absolute; 
    width:34.0037% 
} 
#vline 
{ 
    display:block; 
    position:absolute; 
    width:2.7422% 
} 
@media only screen and (min-width: 769px) { 
    #box{width:90%;}  
} 

function resetimgpos() 
{  
    var imgb = document.getElementById("back"); 
    var wb = imgb.clientWidth; 
    var hb = imgb.clientHeight; 

    var imgf = document.getElementById("front"); 
    var wf = imgf.clientWidth; 
    var hf = imgf.clientWidth; 

    var tf = ((hb - hf)/2) + 'px'; 
    var lf = ((wb - wf)/2) + 'px'; 

    $("#front").css({top: tf}); 
    $("#front").css({left: lf}); 

    var imgl = document.getElementById("vline"); 
    var wl = imgl.clientWidth; 
    var hl = imgl.clientWidth; 

    var ll = ((wb - wl)/2) + 'px'; 

    $("#vline").css({left: ll}); 

} 
$(function() { 
    $(window).resize(function(){ 
     resetimgpos(); 
    }); 
    resetimgpos(); 
}); 

在此先感謝。

Answer 1

你的問題是以div爲中心的圖像，你不知道大小。

1. 變化#back圖像0​​位置從而將伸展父DIV。

2. 將另外兩個圖像的位置設置爲absolute並設置top: 50%和left: 50%以將它們的左上角放置在父div的中心。

3. 在圓形圖像上使用transform: translate(-50%, -50%)。

4. 使用transform: translateX(-50%)在線圖像。

將設置爲-50％的轉換將其自身寬度/高度的50％移動到左側/頂部。

請參閱Fiddle。

我知道我的英語不是很好，但我希望你能理解它。

編輯： 當然，對於線條圖像，你不需要top: 50%，抱歉我的錯誤。

Answer 2

可以使用％，保證金和絕對：

http://codepen.io/anon/pen/zGgmyQ

#box { 
 
    position: relative;/* you need this ! */ 
 
    /*demo purpose START */ 
 
    background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%); 
 
} 
 

 
#box:hover img { 
 
    opacity: 0.35; 
 
    /*demo purpose END */ 
 
} 
 

 
#back { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
#front { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 10%; 
 
    margin: -5% 0 0 -5.2%;/* tune this if new image or different shape */ 
 
    z-index: 1; 
 
} 
 

 
#vline { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 100%; 
 
    margin-left: -1.5%/*tune this if new image or different shape*/ 
 
}

<div id="box"> 
 
<img id="back" src="http://esurf.us/x/csstry001/back.png" class="img-responsive" /> 
 
<img id="front" src="http://esurf.us/x/csstry001/front.png" class="img-responsive" />  
 
<img id="vline" src="http://esurf.us/x/csstry001/vline.png" class="img-responsive" />  
 
</div>

當您設置的寬度或高度爲圖像，它保持它的比例。 （線路100％高，撥號器寬度10％）

您可以根據實際需要調整大小和邊距。

Answer 3

As mentioned by @sajran. You can use the translate to align the image vertically center. 

Here is the working fiddle link: 

http://jsfiddle.net/aL72r8qf