そんな状況があるのかというお話ですが、例えばWeb上で動くゲームを想像してみましょう。

ゲーム画面の縦横比は諸事情により固定。読み物ではないので、縦のスクロールも出したくない。

となると単純にデバイスの横幅に合わせるだけではいけなくなってくるわけですね。

そういった時のお話です。

Demo

fixed-aspect-div – JSFiddle

こんな感じで動きます。

方法

全体像はこんな感じです。

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

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: calc((80vh - 100vw) / 2) calc((100vw - 80vh) / 2);
}
.content {
  width: 100%;
  height: 100%;
  background: yellow;
}

核となるのは`.wrapper`要素のスタイル指定の最後の行です。

  padding: calc((80vh - 100vw) / 2) calc((100vw - 80vh) / 2);

実際に画面の大きさに合わせて変化しているのは.content要素の幅や高さではなく、その親.wrapper要素のpaddingとなります。

Developer Toolsなどで動きを実際に確認してもらうとよくわかると思うのですが、calcで引き算にすることで、画面の大きさによってはネガティブな値がpaddingに指定されるようになっています。ネガティブな値はpaddingに本来指定できないため、そこの値は無効となり結果的にデフォルト値の0となります。

(ブラウザにmin()が実装されればこういうこともしなくて済むのですが)

viewportのアスペクト比が(この場合は)8:10になるときにちょうど、paddingが0になるようにすることで、div要素が横いっぱい/縦いっぱいをうまく切り替えられるようにしているというわけです。

ちなみに、対象の要素が置換要素(画像やcanvasなど)の場合、object-fit: contain;と指定すれば上記のようなことをせずに同じことができます。

object-fit – CSS | MDN

最後までお読みいただきありがとうございました。