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

公開:2021/02/16
更新:2021/02/16
1 min読了の目安(約700字TECH技術記事

やりたいこと

サイズが可変の要素の中で,アスペクト比が固定の要素をなるべく大きく表示したい
つまり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は早く普及してほしい