title: How to make a responsive grid of photos using Twitter Bootstrap if heights are different
body: <p>How can I Twitter Bootstrap 3's 'img-responsive' images, but allow them to have a set height so that a grid of photos will flow (unlike the below image)?</p>
  
  <p>I've tried setting the image height attribute, and max-height attribute, but it seems to ignore those unless I set it's height with '!important', but then they look bad and not really in a grid because they take up so little horizontal space.</p>
  
  <p>I've tried a few tricks related to putting them as background images of divs, and <code>overflow:hidden</code>, but everything I've tried 1) doesn't work, and 2) seems hacky 3) looks messed up.  (tried going through <a href="https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image">this one</a>, as an example)</p>
  
  <p>The images are slightly bigger than the area they fill, as I want them to be able to show bigger on large monitors, so even if I did get the background image thing to work, it would be showing a zoomed-in version of the image, since the background doesn't know to scale-down to fit.</p>
  
  <p>This seems like it HAS to be a common occurrence - is there a somewhat simple way to handle it?</p>
  
  <p><img src="https://i.stack.imgur.com/5w7bc.png" alt="photo gallery"></p>