title: Vertically align responsive width and height image
body: <p>I have a div that will change width with the size of the screen. I also want the height of the div to resize with the image up to a maximum height and then any of the overflowing image will be hidden.</p>
  
  <p>So far I have only been able to center the image using absolute positioning, but this means that I also have to include a placeholder image of the same size so that the div will change height:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    max-height: 400px;
    width: 50%;
    overflow: hidden;
    position: relative;
  }
  #test .test-image {
    width: 100%;
  }
  #test .vertical-align {
    left: 0;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
    &lt;!-- this is a placeholder to make the div height expand / contract depending on the width --&gt;
    &lt;img src="http://lorempixel.com/800/800/sports/1" class="test-image"&gt;
    
    &lt;!-- this is the vertically aligned image --&gt;
    &lt;img src="http://lorempixel.com/800/800/sports/1" class="test-image vertical-align"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way to do this using relative positioning so I do not need to include the placeholder image?</p>
  
  <p>I thought of the following but it does not seem to work as it just seems to move the image back to where it started and crop from the bottom rather than centering:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    max-height: 400px;
    width: 50%;
    overflow: hidden;
    position: relative;
  }
  #test .test-image {
    width: 100%;
  }
  #test .vertical-align {
    margin-top: 50%;
    position: relative;
    transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
    &lt;!-- this is the vertically aligned image --&gt;
    &lt;img src="http://lorempixel.com/800/800/sports/1" class="test-image vertical-align"&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is this possible with pure css?  Please only post css solutions - no js answers.</p>
  
  <p>Thanks</p>
  
  <p><strong>Update</strong></p>
  
  <p>I've managed to figure out why the absolute works but the relative doesn't - when absolute, the <code>top:50%</code> is 50% of the parent div, whereas when relative, the <code>margin-top:50%</code> is 50% of the image height, which is why the translate just moves it back to it's starting place.</p>
  
  <p>So I guess any solution will be based on moving the image down 50% of the parents height before applying the transform.  I've played with padding on the parent but that doesn't seem to work at either</p>