title: How to shrink divs vertically while keeping aspect ratio and location relative to other divs?
body: <p>In <strong>HTML</strong> images tend to keep their aspect ratio by default, which makes it easy to shrink images horizontally and keep proportions when the window is resized like this:</p>
  
  <p><a href="https://i.stack.imgur.com/L3QCT.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L3QCT.gif" alt="enter image description here"></a></p>
  
  <p>In the gif notice how the images not only keep aspect ratio but they stay together. They don't just get smaller in their own containers. This is what I want to accomplish, but vertically. ( When the window is dragged from bottom to top ).</p>
  
  <p>All of the code to this simple demo is below. Currently if you make the snippet full screen and shrink the window vertically everything just gets clipped like this: </p>
  
  <p><a href="https://i.stack.imgur.com/9r614.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9r614.jpg" alt="enter image description here"></a></p>
  
  <p>I want to keep everything on screen just like when it scales horizontally. I want it to behave in exactly the same way, but when the window is scaled <em>vertically</em>.</p>
  
  <p>I've tried giving every element a width of <code>auto</code> or giving it a value of <code>display: inline-block</code>. Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* //////////////////////////// IMPORTS ////////////////////////// */
  @import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
  
  /* //////////////////////////// INITIAL ////////////////////////// */
  body {
    max-width: 1024px;
    margin: auto;
    text-align: center;
  }
  img, footer {
    width: 100%;
  }
  html {
    height: 100%;
  }
  p {
    margin: 0;
  }
  .img-contr {
    width: 33.333%;
    float: left;
  }
  
  /* /////////////////////////// CORE CLASSES ////////////////////// */
  .clr-fix::after {
    content: "";
    display: block;
    clear: both;
  }
  .v-cntr {
    position: relative;
    top: 50%;
    transform: translateY( -50% );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;style&gt;
      * { 
          box-sizing: border-box;
          overflow: hidden;
          outline: 1px solid #f00;
        }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body class="v-cntr"&gt;
  
    &lt;!-- -------------------------- HEADER ------------------------ --&gt;
    &lt;header&gt;
      &lt;img src="http://svgshare.com/i/xH.svg" 
           alt="blue old fashioned car"
      &gt;
    &lt;/header&gt;
  
    &lt;!-- --------------------------- MAIN ------------------------- --&gt;
    &lt;main class="clr-fix"&gt;
      &lt;div class="img-contr"&gt;
        &lt;img src="http://svgshare.com/i/xe.svg" alt="car key"&gt;
      &lt;/div&gt;
      &lt;div class="img-contr"&gt;
        &lt;img src="http://svgshare.com/i/wz.svg" alt="seat belt"&gt;
      &lt;/div&gt;
      &lt;div class="img-contr"&gt;
        &lt;img src="http://svgshare.com/i/vu.svg" alt="car pedals"&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  
    &lt;!-- -------------------------- FOOTER ------------------------ --&gt;
    &lt;footer&gt;
      &lt;p&gt;footer&lt;/p&gt;
    &lt;/footer&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT</strong> So I a made gif showing exactly what I want to accomplish. But I made it by screenshotting my website and making the whole thing an image. The goal is to do this with multiple images inside divs like inside my code. Here is what I want to accomplish:</p>
  
  <p><a href="https://i.stack.imgur.com/Mce90.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mce90.gif" alt="enter image description here"></a></p>
  
  <p>This question: <a href="https://stackoverflow.com/questions/21355111/vertically-center-image-on-page-and-maintain-aspect-ratio-on-resize">Vertically center image on page and maintain aspect ratio on resize</a>
  is a solution for one image. When I try it in my code the images scale but they separate. Setting every image to <code>max-height: 100%</code> doesn't solve at all.</p>