title: Responsive CSS Figure/Image Grid
body: <p>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 <strong>CSS</strong> and working in <strong>IE9</strong> and above.</p>
  
  <p>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.</p>
  
  <p>For this example I am using a figure element containing an image and a caption related to the image.</p>
  
  <p>Example HTML structure:</p>
  
  <pre><code>&lt;div&gt;
    &lt;figure class="landscape"&gt;
      &lt;img 
           src="http://placehold.it/750x500/e8117f/ffffff"
           alt=""
           &gt;
      &lt;figcaption&gt;
        Image Caption
      &lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure class="portrait"&gt;
      &lt;img 
           src="http://placehold.it/300x500/efc63e/ffffff"
           alt=""
           &gt;
      &lt;figcaption&gt;
        Image Caption
      &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Current HTML and CSS:
  <a href="https://jsfiddle.net/andrewwierzba/qpvqvLy3/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><strong>In reference to the image posted below:</strong> <em>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.</em></p>
  
  <p><a href="https://i.stack.imgur.com/VkJlj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VkJlj.png" alt="Image grid reference."></a></p>