title: Set html figure-width to same as width of image it contains
body: <p>When having a image inside a figure-tag, the figure width is 100%. How do I make so that the the figure always will have the same width as the image? Here's my current code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;figure&gt;
      &lt;img src="http://www.google.com/images/srpr/logo3w.png" alt="" /&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  
  figure {
      border: 1px solid red;
  }
  
  img {
      border: 1px solid blue;
      vertical-align: top;
  }
  </code></pre>