How to get correct size for img and figcaption inside figure
<p>I am having truble with the css for an image inside figure. This is the html:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#content figure {
  display: inline-block;
  border: 1px solid #333333;
  height: 200px;
  margin: 10px;
}
#content img {
  height: 180px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid red;
  margin: 0px;
  margin-bottom: -5px;
}
#content figcaption {
  border: 1px solid blue;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  text-shadow: none;
  color: black;
  text-align: center;
  height: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
  &lt;figure&gt;
    &lt;img style="background-image: url('http://placehold.it/300x300');"&gt;&lt;/img&gt;
    &lt;figcaption&gt;image caption that is to long to fit&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;!--... /*Here it can be multiple figure after each other*/--&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>What I want is that the figure should have a fixed height at 200px. The figcaption should have an automatic height depending on how many rows of text there is. The image should then take up the rest of the height and scale the width to keep the proportions. The width of the figure should therefore be the same width as the image inside it. The code I have now is not doing everything and I do not understand how I should modify it to do what I want.</p>