<div class='container'>
  
  <h1>Responsive equal height images with CSS</h1>
  
  <h2 class='muted'>A reminder for myself, with all credit to <a href='https://kartikprabhu.com/articles/equal-height-images-flexbox'>Kartik Prabhu</a></h2>
  
  <p>Wanna put a bunch of images in a row, and make them all the same height? Well, you can. Thanks, flexbox!</p>
  
  <div class='pics_in_a_row'>
    <div class='img1'>
      <img src='http://blimpage.com/pants/codepen/mm1.jpg'>
    </div>
    <div class='img2'>
      <img src='http://blimpage.com/pants/codepen/mm2.jpg'>
    </div>
  </div>
  
  <p>It's <em>slightly</em> trickier than I first hoped, though - you need to:</p>
  
  <ol>
    <li>Put all of your images inside a container div</li>
    <li>Set <code>display: flex;</code> on the container div</li>
    <li>Wrap each image in a div</li>
    <li>Set the <code>flex</code> property of each image's wrapper div to the image's aspect ratio (its width divided by its height)</li>
  </ol>
  
  <p>And boom! You're done!</p>
  
  <div class='pics_in_a_row'>
    <div class='img1'>
      <img src='http://blimpage.com/pants/codepen/mm1.jpg'>
    </div>
    <div class='img2'>
      <img src='http://blimpage.com/pants/codepen/mm2.jpg'>
    </div>
    <div class='img3'>
      <img src='http://blimpage.com/pants/codepen/mm3.jpg'>
    </div>
  </div>

  <p>The only real bummer is having to declare the aspect ratio for each image. Depending on your preference or authoring process, you could do it a few different ways:</p>
  
  <ul>
    <li>Declare the aspect ratio in your stylesheet, with a class name for each wrapper div (as I've done in this demo)</li>
    <li>Declare the aspect ratio inline, as a <code>style</code> attribute on each wrapper div</li>
    <li>Dynamically calculate the aspect ratio for each image using JavaScript</li>
  </ul>

  <p>That last option is tempting; not needing JavaScript is nice, but needing to specify the aspect ratio for each and every image is a pain.</p>
  
  <p>With the CSS methods, you do have a few options for specifying the aspect ratio:</p>
  
  <ul>
    <li>Work out the aspect ratio yourself and hard-code it into the CSS (as I've done in this demo)</li>
    <li>Use CSS's <code>calc()</code> to calculate the aspect ratio (e.g. <code>flex: calc(600/800);</code>)</li>
    <li>Use a preprocessor to calculate the aspect ratio at build time</li>
  </ul>
  
  <div class='pics_in_a_row'>
    <div class='img4'>
      <img src='http://blimpage.com/pants/codepen/mm4.jpg'>
    </div>
    <div class='img5'>
      <img src='http://blimpage.com/pants/codepen/mm5.jpg'>
    </div>
  </div>

  <p>Add as many images as you like - their widths will just shrink until they all fit.</p>
  
  <p>Use with discretion though - if you add too many, they'll all be too small to see. You might want to switch to a different layout at smaller viewport sizes.</p>
  
  <div class='pics_in_a_row'>
    <div class='img1'>
      <a href='https://www.guitarnerd.com.au/2011/07/fender-musicmaster-bass/'><img src='http://blimpage.com/pants/codepen/mm1.jpg'></a>
    </div>
    <div class='img2'>
      <a href='http://www.sheltonsguitars.com/2009/12-9-09/squier-musicmaster-bass-12-9-07.html'><img src='http://blimpage.com/pants/codepen/mm2.jpg'></a>
    </div>
    <div class='img3'>
      <a href='http://www.seymourduncan.com/forum/showthread.php?73445-Hot-Rails-as-a-single-for-Fender-Musicmaster-bass-guitar'><img src='http://blimpage.com/pants/codepen/mm3.jpg'></a>
    </div>
    <div class='img4'>
      <a href='http://imageevent.com/firstflight/fendermusicmasterbass'><img src='http://blimpage.com/pants/codepen/mm4.jpg'></a>
    </div>
    <div class='img5'>
      <a href='https://www.muffwiggler.com/forum/viewtopic.php?p=1810400'><img src='http://blimpage.com/pants/codepen/mm5.jpg'></a>
    </div>
  </div>
  
  <p>Remember to vendor prefix those flexbox properties!</p>
  
  <p class='muted'>Click any of the images in that last row for their sources. Thanks, bass enthusiasts of the internet!</p>
  
</div>
/* Important stuff for this demo. */

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.pics_in_a_row {
  display: flex;
}

.img1 { flex: 1.3344; }
.img2 { flex: 1.3345; }
.img3 { flex: 0.7505; }
.img4 { flex: 1.5023; }
.img5 { flex: 0.75; }



/* Aaaand just some general styling. */

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: rebeccapurple;
}

.container {
  background: white;
  margin: 0 auto;
  padding: 5%;
  width: 75%;
}

h1 {
  margin-top: 0;
}

h2 {
  font-weight: normal;
  font-size: 19px;
  margin-bottom: 30px;
}

.muted {
  font-style: italic;
  color: #666;
}

p, li {
  line-height: 1.5
}

li {
  margin-bottom: 7px;
}

p + p {
  margin-top: -7px;
}

code {
  background: #eee;
  padding: 2px 5px;
  font-size: 90%;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0 2px;
}

.pics_in_a_row {
  margin: 25px 0;
}

.pics_in_a_row > div:not(:last-child) {
  margin-right: 2%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.