私は初心者だし、私はすぐに私の頭の上に得ている他の画像内の画像を中心に、かつ応答性

Question

を保存：

私は私が私のサイト全体で再利用できるパターンを作成しようとしています： 2枚の写真が並んでいて、それぞれ水彩画が後ろから覗いています。

これらは、最小の画面まで適切に拡大縮小する必要があります（私は小さな画面でラップするかどうかについてはかなり不自然です）。

ここに私のコードです：

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

私の本能が、その後、親事業部内の背景画像（水彩飛沫）を持つ2つのdiv要素（同一であるが、そのソースイメージのための）をラップすることでしたが、それぞれの子Divs内に画像を貼り付ける - そして、子Divのそれぞれの中に画像を（垂直方向と水平方向の両方に）中央に置くようにしたので、水彩のはねがすべての面で等しく見えるようになりました。いくつかの奇跡によって

これは、実際に働いていた - ほとんどが - が、私はページを閲覧したときに、私は奇妙なファントムスペースを見つけることでした。内部の画像は決して水彩画の中で正しくセンタリングされませんでした。

:(

をスケーリング時に起こって奇妙なものは、私は必死に混乱しているもあります - ？？私は、背景画像とフレキシボックスネストされた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

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