title: Maintain aspect ratio of div but fill screen width and height in CSS?
body: <p>I have a site to put together that has a fixed aspect ratio of approximately <code>16:9</code> landscape, like a video. </p>
  
  <p>I want to have it centred and expand to fill the available width, and the available height, but never to grow larger on either side. </p>
  
  <p><strong>For example:</strong></p>
  
  <ol>
  <li>A tall and thin page would have the content stretching the full width while maintaining a proportional height.</li>
  <li>A short wide page would have the content stretching the full height, with a proportional width.</li>
  </ol>
  
  <hr>
  
  <p>There are two methods I've been looking at:</p>
  
  <ol>
  <li>Use an image with the right aspect ratio to expand a container <code>div</code>, but I couldn't get it to behave the same way across major browsers. </li>
  <li>Setting a proportional bottom padding, but that only works relatively to the width and ignores the height. It just keeps getting bigger with the width and displays vertical scroll bars.</li>
  </ol>
  
  <hr>
  
  <p>I know you could do this with JS quite easily, but I'd like a pure CSS solution.</p>
  
  <p>Any ideas?</p>