サムネイル画像やイメージスライダーなど、ボックスのサイズや縦横比が決まっていて、画像を合わせたい時。background-size: contain / cover や position: absolute などを使って何とかすることもできますが、もっとスマートな方法がありました。

object-fit プロパティを使うと簡単に画像をリサイズ・トリミングできます。画像の中央配置も簡単、というかデフォルトになってます。

object-fit: contain

画像全体が見えるように画像をリサイズします。

See the Pen object-fit: contain by Takayuki Kojima (@takayuki-kojima) on CodePen.

サイズを指定しないと効かない

object-fit を効かせるにはボックスサイズを指定する必要があるので、width / height を忘れないようにしましょう。

object-fit: cover

ボックスサイズに合わせて画像をトリミングします。

See the Pen object-fit: cover by Takayuki Kojima (@takayuki-kojima) on CodePen.

object-position

画像の配置位置を指定します。%値や数値、キーワードで指定できます。

See the Pen object-position: bottom right by Takayuki Kojima (@takayuki-kojima) on CodePen.