Elyse Elyse - 6 months ago 11
HTML Question

Centering images WITHIN other images, and preserving responsiveness

I'm a newbie, and I've quickly gotten in over my head:

I'm trying to create a pattern I can re-use throughout my site:
two photos, side by side, each with watercolor splashes peeking out from behind them.

They should scale appropriately down to the smallest screens (I'm pretty agnostic about whether they wrap or not on tiny screens).

Here's my 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>





My instinct was to wrap two Divs (identical but for their source images) with background images (the watercolor splashes) inside a parent Div, then stick images within each of the child Divs — and I tried to center the images (both vertically and horizontally) within each of the child Divs, so the watercolor splashes would be equally visible on all sides;

In other words, like this picture.

By some miracle this actually worked — mostly — but I was finding weird phantom space when I inspected the page; the inner images were never quite centering correctly within their watercolor Divs.

There's also weird stuff happening upon scaling :(

I'm desperately confused — should I be using Flexbox? Nested Divs with background-images?

Here's my Fiddle if anyone is feeling brave and generous :)

Any help would be so appreciated!

Answer

Here's a solution with the following features:

  • flex layout
  • viewport percentage units for sizing the images
  • absolute positioning to center one image over the other
  • media query for vertical alignment on smaller screens

.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. http://stackoverflow.com/a/33856609/3597276
  2. http://stackoverflow.com/a/32174347/3597276
  3. http://stackoverflow.com/a/36817384/3597276

Revised Fiddle