title: Scale an image to maximally fit available space and center it
body: <p>I am building a single page application. In one of the views I want to show an image which must take as much available space as possible:</p>
  <ul>
  <li><strong>most important:</strong> it must keep the aspect ratio</li>
  <li>it must not be cropped</li>
  <li>it must be stretched horizontally and/or vertically (without changing aspect ratio) to cover the maximum possible space</li>
  <li>the size of the image and viewport are not known</li>
  <li>it must be centered</li>
  <li>no js must be used</li>
  <li>the element must be an <code>img</code> element and no background must be used - I already have a background (in the container)</li>
  </ul>
  <p>For example, let's say that the image is 100px x 100px, and that we have a container of 500px x 300px. The image would then be stretched to 300px x 300px, and be horizontally centered so that 100px are left as padding on both sides.</p>
  <p>Is this possible?</p>
  <p>Here is my non-finished <a href="http://jsbin.com/kidiqo/1" rel="nofollow noreferrer">code </a> of what I am trying to accomplish.</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>.container1 {
    width: 500px;
    height: 300px;
    border: 2px;
    border-color: red;
    border-style: solid;
  }
  .container2 {
    width: 300px;
    height: 500px;
    border: 2px;
    border-color: blue;
    border-style: solid
  }
  .fill-vertical {
    border: 2px;
    border-style: solid;
    border-color: green;
    display: block;
    max-width: 100%;
  }
  .fill-horizontal {
    width: 100%;
    border: 2px;
    border-style: solid;
    border-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h1&gt;Container 1, 500px x 300px, not filled&lt;/h1&gt;
  &lt;div class="container1"&gt;
    &lt;img src="https://dummyimage.com/100x100/000/fff"&gt;
  &lt;/div&gt;
  &lt;h1&gt;Container 1, filled vertically (should be horizontally centered)&lt;/h1&gt;
  
  &lt;div class="container1"&gt;
    &lt;img class="fill-vertical" src="https://dummyimage.com/100x100/000/fff"&gt;
  &lt;/div&gt;
  
  &lt;h1&gt;Container 300px x 500px, not filled&lt;/h1&gt;
  
  &lt;div class="container2"&gt;
    &lt;img class="fillIt" src="https://dummyimage.com/100x100/000/fff"&gt;
  &lt;/div&gt;
  
  &lt;h1&gt;Container 300px x 500px, filled horizontally, should be vertically centered&lt;/h1&gt;
  
  &lt;div class="container2"&gt;
    &lt;img class="fill-horizontal" src="https://dummyimage.com/100x100/000/fff"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In that code I am forced to use a different class for the image depending on whether I want to stretch vertically or horizontally, but actually I want CSS to do this automatically: <strong>just one stretch class must be defined</strong>.</p>
  <p>In short what I want CSS to do is: <strong>stretch width and/or height to fit available space, keeping aspect ratio</strong></p>