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

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 中（相同但它们的源图像），然后将图像粘贴在每个子图像中Divs — 我试图将每个子 Divs 中的图像（垂直和水平）居中，这样水彩画在所有侧面都同样可见；

奇迹般地，这实际上奏效了——主要是——但我在检查页面时发现了奇怪的幻影space；内部图像在水彩 Divs.

中从未完全正确居中

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

我非常困惑——我应该使用 Flexbox 吗？嵌套 Divs 与背景图像？

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>

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>

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

Centering images WITHIN other images, and preserving responsiveness

html

css

centering

flexbox