【CSS】アスペクト比を保持したまま長辺をフィットさせる

アスペクト比を保持したままキャンバスをブラウザ一杯に、長辺が収まるようにスケールさせたかったので調べた。

答え： CSSの object-fit: contain を使う

デモ(JSFiddle)

キャンバス以外にも画像などにも使える。

やり方

1. 親要素には特に設定必要なし（heightが子要素からじゃなく決まる必要はある）
2. 子要素に object-fit: contain、加えてサイズを親いっぱい width:100%; height:100% 指定する（アスペクトは自動的に保持される）

縦横どちらか長い方が親要素のサイズに合うようにスケールされ、短辺側には余白ができて自動的にセンタリングされる。

object-fit の値は contain の他にもいくつか指定できる：

• cover: 短辺をフィットさせる、長辺ははみ出す
• fill: 親全体を覆う、アスペクト比は無視される
• scale-down: 小さくなる場合には contain でスケールダウン、大きくはならずにそのまま

過去記事

あちらはJavaScriptで onresize リスナーでCSSトランスフォームをしていたが、CSSで解決できるならこちらの方が楽でしょう。