title: css - container div fit content to image
body: <p>I'm wondering if it is possible to specify a div (example div2) or another sourrounding element of an image to fit the height and width to its child.
  Besides, the image should resize (keep aspect ratio) to the full available space (div1) of the div2's parent.</p>
  
  <p>As the image and therefore the aspect ratio, image orientation, hieght and width can change dynamically, no fixed sizing is possible</p>
  
  <p>Here is an example fiddle: 
  <a href="http://jsfiddle.net/rp7u3u2r/1/" rel="nofollow noreferrer">http://jsfiddle.net/rp7u3u2r/1/</a></p>
  
  <pre><code>&lt;div style="width:200px; height: 200px;"&gt;
      &lt;div style="max-height: 100%;max-width:100%;"&gt;
          &lt;img style="max-height: 100%;max-width: 100%;" src="..."/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Expected behavior:
  <img src="https://i.stack.imgur.com/BwiAz.png" alt="Fit div2 to img"></p>
  
  <p>I already tried 'object-fit', 'fit-content', 'display: table-cell', 'display: inline-block', but nothing seems to work as expected.</p>