title: Preserving aspect ratio in a CSS grid
body: <p>I'm trying to implement responsive grid containing 3x4 elements. I'm also using a bitmap image for each cell so I would like to preserve the aspect ratio of each cell. The problem I'm having now, is that my CSS doesn't prevent it from overflowing the vertical size of the viewport. It works fine when scaling on the horizontal axis. </p>
  
  <p><strong>Works as expected:</strong>
  <a href="https://i.stack.imgur.com/ESYm0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ESYm0.png" alt="Works as expected"></a></p>
  
  <p><strong>Doesn't work as expected (creates a scrollbar):</strong>
  <a href="https://i.stack.imgur.com/203aQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/203aQ.png" alt="Doesn&#39;t work as expected"></a></p>
  
  <p>Link to CodePen: <a href="http://codepen.io/ekulabuhov/pen/JEyxby?editors=1100" rel="nofollow noreferrer">http://codepen.io/ekulabuhov/pen/JEyxby?editors=1100</a></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>.container{
    height:100vm; width:100vm; /* IE9 fallback */
    width: 100vmin; height: 100vmin;
    position: absolute;
    top:0;bottom:0;
    left:0;right:0;
    margin: auto;
  }
  
  .gametile {
    background: url('http://adrianpayne.me/game/assets/images/grass.png') no-repeat; 
    background-size: cover;
  
    /* 33.3vmin; */
    width: calc(100vmin/3);
    float:left;
    height: calc(100vmin/3*(91/70));
    margin-top: -16vmin;
  }
  
  
  /*** FOR THE DEMO **/
  body,html {margin:0;background:#123752;color:#fff;}
  a{color:#ccc;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
    
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
    
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
  
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
    &lt;div class="gametile"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>