title: Make responsive image fit parent container
body: <p>I've been trying to figure out if there is a pure CSS solution to ensure the image within my banner doesn't go below the height of the parent but keep ratio of the image.</p>
  
  <p>You can see a demo here: <a href="http://jsfiddle.net/LkxYU/1/">http://jsfiddle.net/LkxYU/1/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="banner_holder"&gt;
      &lt;img src="http://placekitten.com/g/800/600"/&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.banner_holder{
      width: 100%;
      height: 300px;
      min-height: 200px;
      position: relative;
      outline:1px dotted red;
  }
  
  .banner_holder img{
      width: 100%;
  }
  </code></pre>
  
  <p>My aim is to have the image always 100%, but never below 300px in height. This would mean image cutoff, but thats fine, i just want to know if there is a pure CSS solution, or if i need to use jQuery</p>