定心內的其他圖像的圖像，並且保持響應

Question

我是個新手，我已經快在我頭上得到的：

我試圖創建一個模式，我可以重新使用在我的網站： 兩張照片並排排列，每張都有水彩濺出來，從背後偷看。

他們應該適當縮放到最小的屏幕（我對他們是否包裝或不在小屏幕上很不確定）。

這裏是我的代碼：

.two-pics { 
 
    width: 100%; 
 
} 
 

 
.wc-pic-blue { 
 
    width: 40%; 
 
    background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    float: left; 
 
    padding: 4%; 
 
} 
 

 
.wc-pic-pink { 
 
    width: 40%; 
 
    background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    float: right; 
 
    padding: 4%; 
 
}

<div class="two-pics"> 
 
    <div class="wc-pic-blue pic"> 
 
    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg"> 
 
    </div> 
 
    <div class="wc-pic-pink pic"> 
 
    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg"> 
 
    </div> 
 
    <br style="clear: left;" /> 
 
</div>

我的直覺是包兩個div（相同，但他們的源圖像）與背景圖像（水彩飛濺）父Div的內部，然後在每個孩子Div內都粘貼圖像 - 我試圖將圖像（垂直和水平方向）集中在每個孩子Div內，因此水彩飛濺在各個方面都會同樣明顯;

由某種奇蹟這個實際工作 - 主要是 - 但我發現奇怪的幻象空間，當我檢查的頁面;內部的圖像從來沒有正確地集中在他們的水彩Divs中。

還有奇怪的事情發生在縮放:(

我拼命困惑 - 我應該使用Flexbox的背景圖像嵌套的div

Here's my Fiddle如果有人感覺勇敢和慷慨的:)？

任何幫助將如此讚賞！

Answer 1

下面是具有以下特點的解決方案：

• 柔性佈局
• 視窗個單位大小的圖像
• 絕對定位在垂直取向其他
• 媒體查詢到中心一個圖像在較小的屏幕上

.two-pics { 
 
    display: flex; 
 
    justify-content: space-around;  /* 1 */ 
 
} 
 
.pic { 
 
    position: relative; 
 
} 
 
img:first-child { 
 
    height: 30vw;       /* 2 */ 
 
} 
 
img:last-child { 
 
    height: 25vw; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%);  /* 3 */ 
 
} 
 
@media (max-width: 600px) { 
 
    .two-pics { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    } 
 
}

<div class="two-pics"> 
 
    <div class="pic"> 
 
    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-s.jpg" alt=""> 
 
    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg" alt=""> 
 
    </div> 
 
    <div class="pic"> 
 
    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg" alt=""> 
 
    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg" alt=""> 
 
    </div> 
 
</div>

1. https://stackoverflow.com/a/33856609/3597276
2. https://stackoverflow.com/a/32174347/3597276
3. https://stackoverflow.com/a/36817384/3597276

Revised Fiddle

Answer 2

我對準左向右DIV中心的屏幕上的圖像和解決結垢問題。我還爲小屏幕添加了一個@media查詢，它看起來非常好。

Improved Fiddle

.two-pics { 
 
    width: 100%; 
 
} 
 

 
.wc-pic-blue { 
 
    width: 49%; /* decrease for more space between images */ 
 
    box-sizing: border-box; 
 
    background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: top right; 
 
    float: left; 
 
    padding: 4%; 
 
    text-align: right; 
 
} 
 

 
.wc-pic-pink { 
 
    width: 49%; /* decrease for more space between images */ 
 
    box-sizing: border-box; 
 
    background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    float: right; 
 
    padding: 4%; 
 
} 
 

 
.two-pics .pic img { 
 
    max-width: 100%; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .two-pics .pic { 
 
     width: 100%; 
 
     padding: 8%; 
 
    } 
 
    .two-pics .pic img { 
 
     width: 100%; 
 
    } 
 
}

<div class="two-pics"> 
 
    <div class="wc-pic-blue pic"> 
 
     <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg"> 
 
    </div> 
 
    <div class="wc-pic-pink pic"> 
 
     <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg"> 
 
    </div> 
 
    <br style="clear: left;" /> 
 
</div>