はじめに

ゲームっぽいウェブアプリを作っています。

４：３の比率で作成されたマップ画像をブラウザの画面いっぱいに表示したいです。

つまり、下記のようなことをしたいです。

ブラウザのウィンドウが横長の時は、左右に余白をつけて、上下は余白なし
ブラウザのウィンドウが横長の時は、上下に余白をつけて、左右は余白なし

以下、Chromeでの実験結果です。

4:3のエリアをブラウザ内いっぱいに表示する方法

ChatGPTに聞いたところとても良いソリューションを教えてくれましたので、ここで共有します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black; /* 背景色を設定してエリアを際立たせる */
        }
        .container {
            width: 100vw;
            height: 75vw;
            max-width: 133.33vh;
            max-height: 100vh;
            background-color: lightgray; /* テスト用の背景色 */
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- コンテンツをここに追加 -->
        <p>ここに内容を追加します。高さが小さすぎる場合にはスクロールバーが表示されます。</p>
    </div>
</body>
</html>

body, html でまず子要素をflex化し、左右も上下もセンタリングするように指定しています。

縦長の場合

そして、子要素となる .container クラスが面白いです。

まずは縦長の場合の４：３エリア設定です。

width: 100vw, height: 75vw で、４：３のサイズを指定しています。ここで単位にどちらもvwを使っているのがミソです。vw はブラウザ内の表示エリアの横幅を%で指定する単位です。高さに対しても横幅基準で設定することで４：３を実現しています。

開発中のウェブアプリに適用したのが下記です。

横長の場合

これだけだとブラウザが横長の時には子要素の高さが大きすぎて画面をはみ出してしまいます。

この対策が max-width: 133.33vh と max-height: 100vh です。こんどは vh を単位としているところがミソです。高さは最大 100vh、つまりブラウザの表示エリアの高さまでとし、横幅の最大値も高さ単位で133% とすることで４：３を実現しています。

先ほどのウェブアプリで、ブラウザのサイズを変えてみると次のようになりました。

私はこれでうまくいきました。

なお、ブラウザの横幅や高さが小さくなり過ぎたらこの指定をやめてスクロールに切り替えたいと思いましたが、 min-width: 300px などとしただけではうまくいきませんでした。JavaScriptの支援が必要かもしれません。

おわり。