HTML/CSSコーティングで、サムネイル画像やイメージスライダーなど、ボックスのサイズや縦横比が決まっていて、画像を合わせたいときがありますよね。

以前は「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.