title: Center and stretch images vertically, center horizontally
body: <p>I want to scale images so that they are centered horizontally and vertically, and they are stretched vertically until they fill the whole screen vertically. There might be white borders.</p>
  
  <p>Images should maintain their aspect ratio. I added a picture of what I wanted to do. Images should adjust to the resolution of the screen.</p>
  
  <p>From top to bottom, there should be always an image. If you resize the screen the images should adjust and get smaller so the screen is still filled vertically with 3 images from top to bottom.</p>
  
  <p>I don't know how to explain it more clear...</p>
  
  <p><a href="https://i.stack.imgur.com/1O2Nf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1O2Nf.png" alt="enter image description here"></a></p>
  
  <p>This is what i got:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
      body html{
          text-align:center;
          margin: 0 auto;
      }
      .clear {
        clear: both;
      }
  
      #grid {
        height: 100%;
        position:absolute;
        margin: 0 auto;
      }
  
      .grid-element {
        width: auto;
        height: 33%;
        float: left;
      }
  
      .stretch {height:100%; width: auto; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="grid"&gt;
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/bscasino.jpg" class="stretch" /&gt;
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/frankpollet13.jpg" class="stretch"/&gt;
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/groep.jpg" class="stretch"/&gt;
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/groepbscasino.jpg"  class="stretch"/&gt;
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/kleurpotloden.jpg" class="stretch" /&gt;
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/paulverrept.jpg" class="stretch" /&gt;  
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/penselen.jpg" class="stretch" /&gt;  
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/groep.jpg" class="stretch" /&gt;  
      &lt;/div&gt;
  
      &lt;div class="grid-element"&gt;
          &lt;img src="fotos/groep.jpg" class="stretch" /&gt;  
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>URL:
  <a href="http://www.voorleestoer.be/test/" rel="nofollow noreferrer">http://www.voorleestoer.be/test/</a></p>