title: img <a href> link stretches to full width of parent div instead of only covering img
body: <p>Basically, I've got a div with width set to 100%, within which there is an img link. The img's width is set to auto with a height of 600px. The link area stretches over the width of the whole div, in this case the width of the whole page, rather than just the img. </p>
  
  <pre><code>&lt;div class="feature"&gt;
      &lt;a href="feature-page.html"&gt;&lt;img src="feature.jpg" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  .feature {
      width: 100%;
      height: auto;
  }
  
  .feature a img {
      width: auto;
      height: 600px;
      display: block;
      margin: auto;
  }
  </code></pre>
  
  <p>I don't want to change the div's width to a set value (which does work), because I want to be able to add images later on that may have different aspect ratios. Does anyone have a solution? thanks.</p>
  
  <p>This shows the result if you set the width of the div manually: <a href="http://jsfiddle.net/L1xanprh/4/" rel="nofollow">http://jsfiddle.net/L1xanprh/4/</a> I also tried just setting the div width to auto as well, it game the same problem as the width being 100%.</p>