title: <figure>&<figcaption> with floating image, figcaption wraps, and article text wraps around image/caption
body: <p>Searched the web for weeks but can't find the answer that satisfies all my needs (only partial), help is very welcome.</p>
  
  <p>What I want and have accomplished:</p>
  
  <ul>
  <li>Plain HTML5 compliant and CSS</li>
  <li>Show an image within an article</li>
  <li>Image must have a caption</li>
  <li>Caption must below the image</li>
  <li>Caption must be limited to horizantal size of image</li>
  <li>Caption may be longer than one line and text should wrap to next line (still within size of image)</li>
  <li>Image and caption must float as a group to left or right (think of using <code>&lt;figure class="left"&gt;</code>)</li>
  <li>Text of article must wrap around the image and caption</li>
  <li>Image size varies (first image is e.g. 200px, 2nd image somewhere else in text is 320px etc.)</li>
  </ul>
  
  <p>And now I like to add those requirements:</p>
  
  <ul>
  <li>I don't like to add the original width of the image like <code>&lt;figure class="left" style="width:200px"&gt;</code> but only if there is no other way.</li>
  <li>Responsive design: when the image width will occupy more that 50% of the display width, it must be limited to 50% of the display width.</li>
  <li>When the display width is 320px or below, the image must not float but must a block level element, so no text wrap of article around the image.</li>
  </ul>
  
  <p>Where I left:</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>figure {
    display: inline
  }
  
  figcaption {
    display: block
  }
  
  figure.left {
    float: left
  }
  
  figure.right {
    float: right
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;This is a part of the text of the article and at this point a image is inserted at the left side
    &lt;figure class="left" style="width:250px"&gt;
      &lt;img src="image.png" alt="img txt"&gt;
      &lt;figcaption&gt;image caption and a lot of text&lt;/figcaption&gt;
    &lt;/figure&gt;
    and the article text goes on and on so that it will wrap around the image&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(I left out the padding/margins and such to make it look better.)</p>