divでobject-fit:containみたいなことがしたい

1 min read読了の目安(約800字

やりたいこと

サイズが可変の要素の中で,アスペクト比が固定の要素をなるべく大きく表示したい
つまり object-fit:contain を画像以外で再現したい

使ったもの

先月使えるようになったばかりの aspect-ratio を使ってみる
対応が少ないけどそのうち増えるはず

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

結果

aspect-ratio と,上下左右中央揃えとして transform を組み合わせてみた

/* 外側の要素 サイズ可変 */
.out {
    width: 100vw;
    height: 100vh;
    background-color: #e99;
}

/* 内側の要素 サイズ可変だけどアス比固定 */
.in {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background-color: #99e;
    width: 100%;
    max-height: 100%;
    aspect-ratio: 9/7;
}

外側の要素の比率が変わっても,内側がはみ出ずに指定したアスペクト比を維持できている

ちなみに, display:flex で中央揃えを行うとはみ出てしまった

まとめ

padding-top 等の古い方法より健康的なので, aspect-ratio は早く普及してほしい