title: Responsive Image full screen and centered - maintain aspect ratio, not exceed window
body: <p>So I want an <code>img</code> to be displayed </p>
  
  <ul>
  <li>as big as possible (filling the width when it is landscape / height when it is portrait)</li>
  <li>no crop</li>
  <li>no skew or stretch (original aspect ratio)</li>
  <li>centred both vertically and horizontally</li>
  </ul>
  
  <p>Also, the image's original size is not known.</p>
  
  <p>I've tried quite a few different options for this, including a flexbox one (to get the vertical center), but nothing seems to tick all the boxes.</p>
  
  <p>Ideally I'd like this to be an all CSS solution of course, but I have been looking into some JS as well.</p>
  
  <p>Thanks</p>