アスペクト比を保持したままキャンバスをブラウザ一杯に、長辺が収まるようにスケールさせたかったので調べた。
答え： CSSの object-fit: contain を使う
キャンバス以外にも画像などにも使える。
やり方
- 親要素には特に設定必要なし（
heightが子要素からじゃなく決まる必要はある） - 子要素に
object-fit: contain、加えてサイズを親いっぱいwidth:100%; height:100%指定する（アスペクトは自動的に保持される）
縦横どちらか長い方が親要素のサイズに合うようにスケールされ、短辺側には余白ができて自動的にセンタリングされる。
object-fit の値は contain の他にもいくつか指定できる：
cover: 短辺をフィットさせる、長辺ははみ出すfill: 親全体を覆う、アスペクト比は無視されるscale-down: 小さくなる場合にはcontainでスケールダウン、大きくはならずにそのまま
過去記事
固定解像度の要素をスケーリングでウィンドウにフィットさせる：以前も同じようなことしてた。あちらはJavaScriptで onresize リスナーでCSSトランスフォームをしていたが、CSSで解決できるならこちらの方が楽でしょう。