title: Image with 100vh but maintain aspect ratio
body: <p>I have an image which I would like to always be <code>100vw</code> &amp; <code>100vh</code> no matter the screen resolution or view port. However I would like to keep some sort of aspect ratio to avoid stretching and skewing of the image. </p>
  
  <p>This is what I have come up with so far which works lovely with the aspect ration but isn't <code>100vh</code> at all times. Can I make it so the image tag overflows negatively outside of the view port to maintain the image quality and keep the height <code>100vh</code>.</p>
  
  <pre><code>&lt;div class="hero-img"&gt;
      &lt;div class="hero-wrapper"&gt;
          &lt;div class="hero-imgs"&gt;&lt;/div&gt;
          &lt;img src="myimg.png" alt="my hero img" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styles </p>
  
  <pre><code>.hero-img{
      display:table;
      height:100vh;
      .hero-wrapper{
           display:table-row;
          .hero-imgs{
              display:table-cell;
            vertical-align:middle;
            text-align:center;
          }
          img{
          display:inline-block;
          }
      }
  }
  </code></pre>