質問: 表題の通りです。 例えば2:3のボックスを表示したいとして 縦横比を維持したままブラウザの横幅に合わせてサイズを変更させることは簡単にできますが ブラウザの高さによっては画面に入りきらずスクロールバーが出てきてしまいます。 そうではなく、background-size: contain; のように 縦横比を保持して表示領域に収まるようにブロック要素を表示させたいです。 このような表示は可能なのでしょうか? 色々試したり検索してはみたのですが、前者の情報しか出てこないので 方法があればご教授いただけたらと思います。よろしくお願いいたします。
回答: object-fit: containと必要に応じたmax-heightを使えば実現できる気がします.