例えば幅や高さの違う画像を並べて表示するとき、イメージ要素でも背景画像のようにcover,contain …などのトリミングができるようにしてくれるとっても便利なobject-fit。
使う機会も多いと思うので、挙動をまとめておこうと思います。
まずは幅固定、高さを指定していない画像を並べた場合。
See the Pen object-fit_01 by Chihiro Mitome (@chihiromtm) on CodePen.
上をデフォルトとして、これに高さも固定してみます。
See the Pen object-fit02 by Chihiro Mitome (@chihiromtm) on CodePen.
これにobject-fit:coverを加えてみましょう。
See the Pen object-fit03 by Chihiro Mitome (@chihiromtm) on CodePen.
なんとなく画像の位置が…、、、 object-positionで位置指定を加えてみましょう。
See the Pen object-fit04 by Chihiro Mitome (@chihiromtm) on CodePen.
こんな感じでとっても便利です！！
ただ、IE非対応。
対応させたい場合、object-fit-imagesというjsを使うとよいようです。
