今日は、object-fitについて紹介していきたいと思います。
このような画像を作るとき、皆さんはどのように作るでしょうか。

さすがに今は少なくなってきましたが、
一昔前だと、こういった丸角の画像をペイントソフトで作ってからペタっと貼り付けるのが普通でしたが、現在のCSSではスタイルの指定で簡単にトリミングが簡単にできます。

例えば、これまでの方法としてはbackgroundを使った方法です。
画像を背景として配置すると、はみ出た部分は表示されないためトリミングされたような状態になります。
これまでは、backgroundを使っていた人も多いかもしれません。
指定の方法もobject-fitとよく似ていますが、backgroundで設定する場合はこんな感じで少しコードが多くなってしまいます。

See the Pen
backgroundトリミング by Yoshimune (@hachidaime)
on CodePen.

object-fitの特徴は、非常に指定がシンプルであることです。
後ほど紹介しますが、たった１行で画像のトリミングを行うことができます。
backgroundを使った方法と違って、画像要素を画像のまま使用できる（<img>として存在する）ので、構造化データとしても適切です。

現在では、レスポンシブデザインというデバイスのサイズによってホームページの見せ方を変えるというのが普通ですが、そういったこともあって各要素のレイアウトの柔軟性が求められる時代になっています。
デバイスによって、可変領域が変わることも多いので、ペイントソフトであらかじめトリミングされた画像では柔軟性がありません、ちょっとした調整にわざわざペイントソフトで作り直さないといけません。
※昔はそうだった・・・
トリミング程度であれば、CSSで操作しておくと変更も簡単です。

写真画像はファイル形式がjpgがいいのですが、丸角の画像を作る場合は角の部分を透過させるためにpngで作成する必要がありファイルサイズが大きくなる傾向がありました。
CSSでトリミングできれば、画像自体はjpgでも問題なく角の部分を透過させることができます。

object-fitを実際に使ってみましょう。
使い方は非常に簡単なので、皆さんすぐに使えるでしょう。

いずれもはみ出た部分がトリミングされます。
実際に見てみる方がわかりやすいでしょう。

See the Pen
object-fit by Yoshimune (@hachidaime)
on CodePen.

とっても簡単です、ぜひ使ってみてください。