title: CSS: How can I set image size relative to parent height?
body: <p>I am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far:</p>
  
  <p><a href="http://jsfiddle.net/f9krj/2/">http://jsfiddle.net/f9krj/2/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg"&gt;
      &lt;img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>a.image_container {
      background-color: #999;
      width: 200px;
      height: 180px;
      display: inline-block;
      overflow: hidden;
  }
  a.image_container img {
      width: 100%;
  }
  </code></pre>
  
  <p>As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?</p>