Question

我是一个新手，我很快就抓住了我的头脑：

我尝试创建一个可以在整个网站中重复使用的模式： 两张照片，并排，每张照片都是水彩溅从后面偷看。

它们应该适当缩小到最小的屏幕（我对它们是否包裹在微小的屏幕上非常不可知）。

这是我的代码：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

我的直觉是用父Div中的背景图像（水彩溅）包裹两个Div（相同但是对于他们的源图像），然后在每个子Div中粘贴图像 - 我试图使图像居中（两者都是垂直和水平）在每个儿童Div中，所以水彩飞溅在各个方面同样可见;

通过一些奇迹，这实际上起了作用 - 主要是 - 但是当我检查页面时，我发现了奇怪的幻影空间;内部图像在他们的水彩画中并没有完全正确地居中。

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

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

Here's my Fiddle如果有人感到勇敢和慷慨：）

任何帮助都会非常感激！

Answer 1

这是一个具有以下功能的解决方案：

flex layout
用于调整图像大小的视口百分比单位
将一个图像置于另一个图像上方的绝对定位
媒体查询在较小屏幕上进行垂直对齐

＆＃13;

<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>

＆＃13;

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dark background"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"></View>
    <RadioButton
        android:id="@+id/radio_darkbackground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onRadioButtonClicked"/>
</LinearLayout>

＆＃13;

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>

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

2 个答案: