定心内的其他图像的图像，并且保持响应

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>