CSSを使った画像のトリミングをする方法

CSSを使った画像のトリミングする方法

画像の一覧を表示したいときなど、すべての画像が同じサイズだといいですが違う場合があったり、デバイスによってサイズを変更したいときってありますよね。そんなときに便利なCSSがあります。
CSSを使って画像のトリミングができるobject-fitプロパティの使い方についてまとめました。

画像を中央でトリミングする方法

このような横長の画像を200pxの正方形でトリミングしたいときは以下のように指定します。

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

See the Pen Untitled by Tadafumi Ito (@suzuran_code) on CodePen.

このようにobject-fitプロパティを使うと元の画像の縦横比は変えずに、縦横の大きさの小さい方法を基準にして自動的に拡大・縮小して、はみ出した部分をトリミングしてくれます。

画像を任意の位置でトリミングする方法

中央でトリミングするのではなく、任意の場所でトリミングしたいときはobject-positionプロパティ を指定します。

左上でトリミングをしたい場合は以下のように指定します。

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: left top;
}

See the Pen 20211122_02 by Tadafumi Ito (@suzuran_code) on CodePen.

右下でトリミングをしたい場合は以下のように指定します。

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: right bottom;
}

See the Pen Untitled by Tadafumi Ito (@suzuran_code) on CodePen.

このようにobject-positionプロパティは左上を起点に横の位置と縦の位置を指定します。上記のような指定の仕方ではなくパーセントやピクセルを指定することもできます。