Responsive CSS Figure/Image Grid

Question

How would you go about building a responsive image grid with images varying in height and width. The suggested solution will need to be purely in CSS and working in IE9 and above.

Ideally, the images should respect the width assigned to them, but their heights should be of equal values, until reaching mobile viewports. For mobile viewports, the images will stack as block elements.

For this example I am using a figure element containing an image and a caption related to the image.

Example HTML structure:

h**p@h**p-VirtualBox:~/Programming$ ./helloInput64
Enter your name: brad
Hello, brad
Enter number 1: 2
Enter number 2: 3
Select function: ADD(1), SUB(2), MUL(3), DIV(4) 1
The sum is: 5Run again? YES(1), NO(0) h**p@h**p-VirtualBox:~/Programming$

Current HTML and CSS: JSFiddle

In reference to the image posted below: The images with the dimensions 750x500 need to fill the gap outlined with the dashed stroke, to be of equal height to the image with the dimensions of 300x500.

Answer 1

An easy way to do this is with flexbox. The downside is that ie9 does not support flexbox.

BaseAdapter adapter = new customListAdapter(this, new String[]{"Switch 1", "Switch 2 ", "Switch 3", "Switch 4", "Switch 5", "Switch 6", "Switch 7"});
adapter.setOnCheckChangedListener( mOnCheckChangedListener );
lv.setAdapter(adapter);

/* Body */

body {
  background-color: #fff;
  margin: 0;
}


/* Container */

div {
  display: block;
  font-size: 0;
  margin: 0 auto;
  max-width: 1050px;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}


/* Figure */

figure {
  display: block;
  margin: 0 auto 20px auto;
  vertical-align: top;
}

.landscape {
  max-width: 750px;
}

.portrait {
  max-width: 300px;
}

img {
  width: 100%;
  height: 95%;
}

figcaption {
  background-color: #fff;
  border: 1px solid #eee;
  border-top: none;
  border-radius: 0 0 2px 2px;
  color: #888;
  font: 12px arial, sans-serif;
  margin-top: -4px;
  padding: 10px 5px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  figure {
    display: inline-block;
    margin-right: 20px;
  }
  figure:nth-child(even) {
    margin-right: 0;
  }
  .landscape {
    width: 60%;
  }
  .portrait {
    width: 40%;
  }
}

@media screen and (min-width: 1024px) {
  /* Placeholder */
}