在其他图像中居中图像，并保持响应能力

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 中，因此水彩溅在所有侧面上都同样可见；

奇迹般地，这实际上奏效了——大多数情况下——但当我检查页面时，我发现了奇怪的幻影空间；内部图像在其水彩 Div 中从未完全正确居中。

缩放时还会发生奇怪的事情:(

我非常困惑——我应该使用 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>