object-fitによる画像比率を保ったセンタリング

投稿日：2019年7月20日更新日：2019年7月22日

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。

と言うのも可変要素であり、幅を制御するのが難しかったりします。

まあ縦長とか横長とか決まっていればwidth:n%などとしておけばいいのですが、縦長、横長の両方がきた場合のセンタリングは少々めんどかったりします。

一応、どんな要素がきても必ず中央になるCSSは下記のような書き方でしょうか？

　　 max-width: 100%;
    max-height: 100%;
    position: absolute;
    height: auto;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

　　 max-width: 100%;

max-height: 100%;

position: absolute;

height: auto;

width: auto;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

これであれば基本縦横比を保ったまま、boxの中央になります。margin:0 autoが使えないこともあるようなので、上記のようなやや手の込んだセンタリングが必要にないります。

が、フロントのスキルのある方のコードを見たところ、

width:100%;
height:100%
object-fit:contain

width:100%;

height:100%

object-fit:contain

なるコードを発見。

画像の比率に応じて自動的に幅に収まるように(小さい方の最大幅を自動的にとる)プロパティのようです。

background:contain

1	background:contain

に近いですね。

background同様、大きいサイズに合わせるプロパティの

object-fit:cover

1	object-fit:cover

もありました。合わせて使っていきたいですね。

参考リンク

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー