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の値を指定します。

fill	画像の縦横比を無視して、要素にぴったり合わせます。画像が歪んだり伸びたりする可能性があります。
contain	画像の縦横比を保持して、要素の中に収まるようにします。画像が小さくなったり余白ができたりする可能性があります。
cover	画像の縦横比を保持して、要素を埋め尽くすようにします。画像が大きくなったり切れたりする可能性があります。
none	画像のサイズや形を変えません。要素からはみ出す可能性があります。
scale-down	fillとnoneのうち、小さい方に合わせます。

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

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を使って、自由に画像のサイズや形を変えてみましょう！