title: How can I set responsive image height to 100%?
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;article class="post clearfix"&gt;
      &lt;div class="post-img"&gt;
          &lt;img src="path/to/img"/&gt;
      &lt;/div&gt;
      &lt;div class="post-details"&gt;
          [content]
      &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>img {
      max-width: 100%;
      height: auto;
  }
  .post-img { 
      float: left;
      width: 33.33%;
      margin-right: 1.5em;
      overflow: hidden;
  }
  </code></pre>
  
  <p>I want the div.post-img to be 100% as tall as its parent article, and for the img inside it to be 100% tall as well. (It's OK if some of the image is clipped off from the left or right sides.)</p>
  
  <p>The height of the article is unknown, so I can't hard code it. </p>
  
  <p>Thanks in advance!</p>