title: How can I achieve similar images to Medium.com's Feature Headers? (Cropped Images)
body: <p>Can anyone workout how medium.com does thier feature header image cropping? </p>
  
  <p>I've tried looking online - but I haven't found anything really. It's the only responsive image resizing solution of its type (that I've personally come across). </p>
  
  <p>I'd be very interested in any ideas - If it's any help - the system they employ is very, very bad for portrait images - it's obviously only built for landscape.</p>
  
  <h2>Feature Header Example</h2>
  
  <p><img src="https://i.stack.imgur.com/PrAnJ.jpg" alt="Feature Header"></p>
  
  <hr>
  
  <h2>Scaling Comparison Shot</h2>
  
  <p>Compare the top, and bottom image (both the exact same) - notice that the top image has a 10%~ crop on the top and bottom - but the width remains unchanged. </p>
  
  <p>A static 10%~ works okay for this image - but with another, it produces something vastly different, making me think that the width/height/aspect ratio are tied to the cropping percentage.
  <img src="https://i.stack.imgur.com/jyZTw.png" alt="Scaling Comparison Shot"></p>
  
  <hr>
  
  <h2>Short Video showing the scaling process in action</h2>
  
  <p><a href="http://www.teehanlax.com/resources/img/story/medium/prototypes/feature-header.mp4" rel="noreferrer">Tehan + Lax</a></p>
  
  <hr>
  
  <h2>CSS</h2>
  
  <p>Currently this is the code I am using (just wanted to test percentages).
  The image sits inside the div named image, that uses an overflow hidden, and the image uses padding top/bottom to 'crop' it.</p>
  
  <pre><code>.image {  
      height: auto;
      width: 100%;
      overflow:hidden;   
  }
  
  .image img {
      height: auto;
      width: 100%;
      margin-bottom: -11%;  
      margin-top: -8%;
  }
  </code></pre>