title: Fill a div with an image respecting aspect ratio
body: <p>Is it possible to <em>fill</em> a div with an image such that at least one image dimension is 100% and the other dimension is either wider or equal size as the div, whilst respecting the image's aspect ratio.</p>
  
  <p>An example could use the classes <code>wide</code> and <code>tall</code> like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="tall"&gt;
    &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Klaproos.jpg/266px-Klaproos.jpg"/&gt;
  &lt;/div&gt;
  
  &lt;div class="wide"&gt;
    &lt;img src="https://groenevrijdag.files.wordpress.com/2013/11/klaproos2.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>div {
    width: 400px; height: 400px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
  }
  div.tall img { width: 100%;  margin-top: -50%; }
  div.wide img { height: 100%; margin-left: -50%; }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/7tuod6vu/" rel="nofollow">https://jsfiddle.net/7tuod6vu/</a></p>
  
  <p>I'm looking for a pure HTML+CSS solution which works for responsive rectangular (not necessarily square) divs. For this particular reason, Javascript would be a pain as one would need to determine whether the width or height should be 100% on every resize. Server side wouldn't even be an option.</p>
  
  <p>Does a pure HTML+CSS solution exist for this?</p>
  
  <p><strong>EDIT</strong> Should have been clear about this from the beginning, sorry about that :( I'm not looking for the background-image solution, since it does not allow base64-inhtml representation of images. Moreover, I think background-image's are semantically different from <code>&lt;img&gt;</code>s.</p>