Zentrieren Bilder innerhalb anderer Bilder und Bewahrung Ansprechbarkeit

Question

Ich bin ein Neuling, und ich habe schnell in mir über den Kopf bekommen:

Ich versuche zu erstellen ein Muster kann ich während meiner Website wiederverwenden: zwei Fotos, Seite an Seite, jeweils mit Wasserfarben Spritzer spähen hinter ihnen.

Sie sollten bis auf die kleinsten Bildschirme angemessen skalieren (ich bin ziemlich agnostisch darüber, ob sie oder nicht auf winzigen Bildschirmen wickeln).

Hier ist mein Code:

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

Mein Instinkt zwei Divs (identisch, aber für ihre Quellbilder) mit Hintergrundbildern (die Aquarell Spritzer) in einem übergeordneten Div, zu wickeln war dann Stick Bilder in jedem der Kinder Divs - und ich habe versucht, die Bilder (vertikal und horizontal) in jedem der Kinder Divs zu zentrieren, so dass die Wasserfarben Spritzer wäre gleichermaßen sichtbar auf allen Seiten;

Wie durch ein Wunder das tatsächlich funktioniert - vor allem - aber ich seltsam Phantom Raum wurde zu finden, wenn ich die Seite überprüft; Die inneren Bilder konzentrierten sich nie richtig in ihren Aquarell-Divs.

Es gibt auch seltsame Dinge passiert auf Skalierung :(

ich verzweifelt bin verwirrt - sollte ich verwenden Flexbox Nested Divs mit Hintergrund-Bilder

Here's my Fiddle wenn jemand fühlt sich mutig und großzügig :)?

Jede Hilfe wäre so willkommen!

Answer 1

Hier ist eine Lösung mit folgenden Eigenschaften:

• flex Layout
• Darstellungsfeld Prozenteinheiten für die Auslegung der Bilder
• absolute Positionierung ein Bild über die andere
• Medien-Abfrage für eine vertikale Ausrichtung zu zentrieren auf kleineren Bildschirmen

.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

ich zentriert die Bilder auf dem Bildschirm durch die linke div rechte Ausrichtung und die Skalierung Problem gelöst. Ich fügte auch eine @media Abfrage für kleinere Bildschirme hinzu, es sieht sehr gut aus.

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>