title: Center full screen image vertically
body: <p>I want to center an full screen image vertically.
  I can't define image in CSS because the image depends on URL parameters.</p>
  
  <pre><code>&lt;div&gt;
      &lt;img src="photo.jpg"&gt;
  &lt;/div&gt;
  
  div {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>If I define my image CSS like this:</p>
  
  <pre><code>div img {
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>My image will stretch and be deformed in height to fit on screen.</p>
  
  <p>If I define my image CSS like this (just without defining height):</p>
  
  <pre><code>div img {
      width: 100%;
  }
  </code></pre>
  
  <p>My image will not stretch/be deformed, but it will start at <code>top: 0</code> of the image. What I want is the image to be centered vertically and the overflow of it's height to be hidden.</p>
  
  <p>Basically I want the same behaviour I would get in CSS with background centered:</p>
  
  <pre><code>background: url(photo.jpg) no-repeat center;
  background-size: cover;
  </code></pre>
  
  <p><strong>EDIT</strong>: I forgot to mention that CSS <code>object-fit: cover</code> works on this but I'm looking for a more cross-browser solution since this property does not work in every browsers.</p>