🤠

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

1 min read

はじめに

以前書いた記事の内容が間違っていたので修正版です。

やりたいこと

imgcanvas 要素には object-fit というプロパティが適用できます。

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

その中でも object-fit:contain は、画像などのアスペクト比を維持したまま、その要素の領域に収まるように拡大縮小されます。

面倒なところを勝手にやってくれて非常に便利です。ぜひ div 等でも同じことをしたいと考えました。

使ったもの

いきなり結論ですが、 aspect-ratio と中央揃えに inset を用いることで解決しました。

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.out {
    /*子要素のpositionを制御する*/
    position: relative;
}

.in {
    /*上下中央揃え用*/
    position: absolute;
    /*上下左右中央揃え用*/
    inset: 0;
    /*上下左右中央揃え用*/
    margin: auto;
    /*子要素が消えないようにする*/
    width: 100%;
    /*外枠からはみ出さないように調整*/
    max-height: 100%;
    /*アスペクト比の維持*/
    aspect-ratio: 9/7;
}

結果

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

おわりに

これなら怪しい書き方を避けられて読みやすいのではないでしょうか?

ビバ!モダンな書き方!