title: Crop image in CSS
body: <p>I've created a two-column grid of images, which works fine with all-landscape images: <a href="http://www.mtscollective.com/2014/03/gallery-wonder-years-real-friends-and.html" rel="nofollow noreferrer">Link</a>. However, I've added a portrait image that throws off the layout, so I'd like to be able to &quot;crop&quot; the image so that the height matches the others'. <a href="http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/" rel="nofollow noreferrer">I tried using a negative margin</a>, but it had no effect:</p>
  <pre class="lang-css prettyprint-override"><code>.portrait-crop
  {
      overflow: hidden;
  }
  
  img.portrait-crop
  {
      margin-bottom: -30px;
  }
  </code></pre>
  <p>I'm not sure what I'm doing wrong. Any help would be appreciated.</p>
  <p>For reference, <a href="http://jsfiddle.net/91z2wxfy/" rel="nofollow noreferrer">this is my code</a>.</p>