画像の縦横比を保ち画像をトリミングするためのobject-fitプロパティ。
この記事ではobject-fitプロパティの使い方をご紹介したいと思います。

画像の縦横比率と見え方

object-fitプロパティの使い方をご紹介する前に、まずは縦長、横長の画像を表示するとどのような見え方になるか見てみましょう。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このように縦長、横長画像が表示されます。
どちらの画像も縦横比率を保って表示しているので違和感はないですね。

続いて、この縦長画像、横長画像を正方形の表示領域に表示するとどのような見え方になるか見てみましょう。

img{
    width: 200px;
    height: 200px;
}

このようにwidthプロパティとheightプロパティで画像の縦横サイズを指定します。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

縦長画像、横長画像ともに縦横比が変わってしまったため、画像が潰れてしまいましたね。

Web制作を行うユーザーであれば、表示サイズに合わせて、そのサイズの画像を用意すればこのような画像潰れは起こりませんが、一般のユーザーが会社のホームページのお知らせやブログを更新する際、必ずそのサイズに画像をそろえてくれるとは限りません。
そんな時に便利なCSSの指定がobject-fitプロパティです。

object-fitの使い方

ここからがこの記事の本題です。object-fitプロパティの使い方を見てみましょう。

object-fitを使ってトリミングする

使い方はとっても簡単で縦横のサイズを指定したimgタグにobject-fit: cover;を追加するだけです。

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

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

先ほどは強引に縦横比率を指定サイズに合わせようとしたため画像が潰れてしまいましたが、object-fit: cover;を指定したことで、指定サイズからはみ出す部分はトリミングしてくれるようになりました。

トリミング位置を指定する

object-fit: cover;とセットで、object-positionプロパティを使うことで画像のトリミング位置を指定することも出来ます。

object-positionプロパティは左上を基準に横の位置と縦の位置をそれぞれ指定します。

object-position: 横の位置 縦の位置;

/* 指定なし：中央でトリミング */
img{
    width: 200px;
    height: 200px;
    object-fit: cover;
}

/* 左上でトリミング */
img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: left top;
}

/* 左下でトリミング */
img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: left bottom;
}

/* 右上でトリミング */
img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: right top;
}

/* 右下でトリミング */
img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: right bottom;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

縦横の長辺を基準に短辺を余白にする

object-fitプロパティはトリミングの他、縦横の短い方に余白をつけることも出来ます。

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

横長の画像の場合は左右に余白が出来、縦長の画像の場合は上下に余白が出来ます。

実装サンプルはこちら。
分かりやすくするために余白部分をグレー背景にしています。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
object-fitプロパティを使うことで画像潰れを防ぐことが可能です。
imgタグにはとりあえず指定しておくと良いですね。