title: make img responsive and fill into a div
body: <p>I have a div with a defined width and height. Then I have an image which I want to fit on it (keeping proportions). Like that <a href="http://jsfiddle.net/n6czk9xt/2/" rel="nofollow noreferrer">JsFiddle</a> :</p>
  
  <pre><code>&lt;div style="width: 200px; height: 300px; background: red;"&gt;
      &lt;img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: 100%; max-height: 100%" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want <strong>a div wrapped on the img (that is ajusted exactly to the img width and height and position) because then  want to have some elements inside the div with <code>position:absolute</code> relatively to the img</strong>. Check on <a href="http://jsfiddle.net/n6czk9xt/3/" rel="nofollow noreferrer">JsFiddle</a>:</p>
  
  <pre><code>&lt;div style="width: 200px; height: 300px; background: red;"&gt;
      &lt;div style="display: inline-block; max-width: 100%; max-height: 100%; background: blue;"&gt;
                  &lt;img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: inherit; max-height: inherit" /&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The result is wrong, cause the img is overlayed on the div. I want the img to resize like in the first example.</p>
  
  <p>In <a href="https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent/14264093#answer-14263416">Child with max-height: 100% overflows parent</a> they pointed out that the div needs to have a height and a width, but then the div will not be filling the whole img.</p>
  
  <p>There is actually a way to do it?</p>
  
  <p>My whole layout is more complex and totally responsive with flex on top and the example here is just an approximation focused on the issue I have. So any solution with fixed height and width will be wrong.</p>