CSSのみで縦横比固定の要素をウインドウサイズいっぱいに表示する

ウインドウサイズによらず縦横比固定で表示したいケースがある。
JavaScriptを使う方法もあるが、CSSのみで実現する。

コード例（縦横比 16:9）

<div class="content"></div>

body {
  margin: 0;
}

.content {
  background-color: green;
  height: 56.25vw;
  width: 177.78vh;
  max-height: 100vh;
  max-width: 100vw;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Demo(JSFiddle)

ポイント

• heightをvw、widthをvhで指定することにより縦横比を固定
  • 上の16:9の例では、heightは（9 / 16 * 100 = 56.25）、widthは（16 / 9 * 100 ≒ 177.78）
• max-heightとmax-widthを指定し、画面外に要素がはみ出さないようにする
• positionをabsolute、marginをautoにし、4つの配置位置をそれぞれ0にすることで、画面中央に配置する