title: DIV height based on child image height adds few extra pixels at the bottom
body: <p>Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.</p>
  
  <p><a href="http://jsfiddle.net/6x8Dm/">http://jsfiddle.net/6x8Dm/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="column"&gt;
          &lt;img src="http://www.lorempixel.com/200/200/" /&gt;
      &lt;/div&gt;    
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS</strong>  </p>
  
  <pre><code>.wrapper {
      width:200px;
      margin:0 auto;
  }
  .column {
      width:100%;
      background:#cc0000;
  }
  
  img {
      width:100%;
  }
  </code></pre>