Side by Side Responsive Images w/o Reflow

Question

Wanting to display 2 responsive images without having the browser reflow the screen as the images are loaded. I am currently using a modified version from this answer: responsive-design, image, how to set width/height to avoid reflow on image-load

Here is the fiddle for a single responsive image: https://jsfiddle.net/hxraak4u/

HTML

<div class="image-wrapper" style="max-width: 608px; ">
    <div style="padding-bottom: 49.34%; "> <!-- Height / Width -->
        <img src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" style="max-height: 300px;" />
    </div>
</div>

CSS

.image-wrapper {
    margin: 15px auto;
    page-break-inside: avoid;
}
.image-wrapper div {
    position: relative;
    height: 0;
    overflow: hidden;
}
.image-wrapper div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Note: I'm using some inline styles are because I am using Razor to create the HTML for the image and to set the width, height, and height/width (bottom padding %).

I am now trying to get 2 different height images to display side by side while preserving what I already have working. Specifically:

different height images to display side by side
images are centered in their parent div
images are not displayed larger than 100%
have these 2 images stack vertically if the width of the display decreases to be less than the width of either of the 2 images
if the display shrinks further, shrink the width of the images as necessary while preserving the width:height ratio - standard responsive UI
when printing, don't break images over pages, whether it be 2 images on a row or one, but don't require both images together to not break over a page when they are on different rows
when the HTML is loaded, reserve vertical space for each image based on the width of the display and the width/height ratio - prevent reflow

Update: For the 4th bullet above "have these 2 images stack vertically if the width of the display decreases to be less than the width of either of the 2 images", meant to say "if width decreases to be less than width of both images together" — Mike, Aug 04 '15 at 00:17

score 1 · Accepted Answer · edited May 23 '17 at 11:58

DEMO: jsFiddle

Alt: Full Screen

HTML/CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html { box-sizing: border-box; font: 700 16px/1.5 Consolas; }

*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }

.flexWrapper { margin: 2em auto; max-width: 38em; page-break-inside: avoid; display: flex; flex-direction: row; justify-content: center; }

.flex { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; overflow: none; outline: 3px solid red; flex: 0 1 auto; }

.exampleImg0, .exampleImg1 { max-height: 20em; width: 100%; height: 100%; display: block; }

@media screen and (max-width:37em) {
  .flexWrapper { flex-direction: column; align-items: center; }
}
</style>
</head>

<body>
<div class="flexWrapper">
  <div class="flex">
    <img class="exampleImg0" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" />
  </div>
  <div class="flex">
    <img class="exampleImg1" src="http://placehold.it/240x320/fff/000.png&text=240x320" />
  </div>
</div>
</body>
</html>

Fundamental changes were made, such as:

box-sizing
reset of margin, padding, and border
font-sizeis declared at root

just for evening out how everything behaves for measuring purposes, positioning, etc...

Renamed the elements (I need to use weird names to associate things better)

.image-wrapper.............. .flexWrapper
.image-wrapper``div......... .flex
.image-wrapper``div img... .exampleImg0 (original img) and .exampleImg1 (added img)

Brief Explanation:

.flexWrapper``{ display: flex; flex-direction: row; justify-content: center;... See this `
.flex { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; overflow: none;... See this ...outline: 3px solid red; just to see the flex-items better... ...flex: 0 1 auto; } This allows the 2 divs (.flex) that wrap the imgs to behave pretty much within the criteria you established.
.exampleImg0, .exampleImg1 { max-height: 20em; width: 100%; height: 100%; display: block; } These properties help the imgs center within it's parent, .flex and maintain a responsive ratio.
a simple media query...@media screen and (max-width:37em) { .flexWrapper { flex-direction: column; align-items: center; } } ... so whenever the images shrink, they'll stack on top of each other.

OK. Wasn't aware of the flex logic. Think I got it working with the different height images, and avoided the media query by using flex-wrap: wrap. https://jsfiddle.net/hxraak4u/4/ — Mike, Aug 05 '15 at 01:58

Side by Side Responsive Images w/o Reflow

1 Answers1

DEMO: jsFiddle

Alt: Full Screen

HTML/CSS