CSSだけで画像をトリミングする object-fit,object-positon

ウェブページで使う画像を特定の位置やサイズでトリミングしたい時、CSSだけで画像をトリミングすると、画像のトリミング作業を効率化することができます。

CSSだけで画像をトリミングするメリットは、画像をトリミングする際に画像を再保存する必要がないことです。

画像をトリミングするには、通常、画像編集ソフトを使用して画像をトリミングし、再保存する必要があります。しかし、CSSだけで画像をトリミングすれば、画像を再保存することなく、画像をトリミングすることができます。

また、画像を再保存する必要がないため、画像の品質を維持することができます。

これは、画像の数が多かったり、サイズがバラバラだったりする場合にとても便利です。

CSSだけで画像をトリミングするobject-fitプロパティ

object-fitプロパティを使えば、縦横比を維持したまま、画像のサイズや形を指定した要素に合わせて変えることができます。

横長の写真を200px×200pxの正方形に画像をトリミングしたい場合、以下のようにobject-fitプロパティを指定します。

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

画像をどのようにはめ込むか、object-fitの値を指定します。

object-fitプロパティの適用例

使用画像：Adobe Stock/ピクニックをする家族・ファミリー（4人）

使用画像：Adobe Stock / Group of young lions lying on rocks

See the Pen object-fit:fill by mixtaro (@mixtaro) on CodePen.

object-fit: cover;が指定したオブジェクトのサイズに合わせて縦横比を維持したままトリミングできます。この場合、画像の中央を基準にしてトリミングされます。

トリミングの位置を右下や左上を基準にしたい場合はobject-positionを使います。

トリミングの位置を調整する object-position

また、object-positionというプロパティを使って、トリミングする位置を変えることもできます。object-positionは、左右と上下の位置を指定できます。例えば、以下のようなコードで、画像の右下からトリミングできます。

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

See the Pen position by mixtaro (@mixtaro) on CodePen.

object-positionの指定例

object-position: 50% 50%; /* 初期値　*/
object-position: right bottom; /* 右・下部 */
object-position: center top; /* 左右中央・上部 */
object-position: 10px; /* 左から10pxの位置から表示 */

以上のように、CSSだけで画像をトリミングするメリットはたくさんあります。

object-fitとobject-positionを使って、自由に画像のサイズや形を変えてみましょう！