CSSだけで画像をトリミングできる!object-fitプロパティの使い方

画像を並べたい時など、画像のサイズが全て同じなら綺麗に表示できますが、必ず全ての画像が同じになるとは限りません。でもPhotoshopで画像をいちいちリサイズするのは面倒です。

そこで、画像をCSSだけでトリミングできるobject-fitプロパティを紹介します。

 

画像を中央の位置でトリミングする

例えば縦長の画像や横長の画像はwidthとheightを揃えて正方形で表示しようとすると、画像が潰れてしまって見栄えが悪いです。

そこで、画像に対してobject-fit: coverを指定すると画像が中央でトリミングされます。

img {
width: 250px;
height: 250px;
object-fit: cover; /* この一行を追加するだけ! */
}

 

positionプロパティなどを指定する必要も一切なく、縦横比を維持したままトリミングしたい時はobject-fit: coverを使います。

画像は縦横のうち小さい方を基準に自動的に拡大・縮小され、はみ出した部分がトリミングされます。

 

レスポンシブに対応する

縦横のサイズを固定せずに、画像の高さのみを固定して横幅は画面や要素の幅いっぱいに表示させたい時もobject-fit: coverで全て解決です。

img {
width: 100%;
height: 400px;
object-fit: cover;
}

 

widthは100%で横幅いっぱいに表示され、heightは固定されています。

普通画面サイズを変更すると画像が潰れてしまいますが、object-fit: coverを指定していると綺麗に表示することができます。

 

任意の位置でトリミングする

object-fit: cover;で画像の縦横比を保持しつつ中央でトリミングしていましたが、任意の場所でトリミングしたい場合もあるかもしれません。

そんな時はobject-positionプロパティを指定することで任意の場所でトリミングができます。

指定方法は左上が基準となっており、「object-position: 横の位置 縦の位置」という形で指定します。

.img-box img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
.left-bottom {
  object-position: 0 100%
}
.right-bottom {
  object-position: 100% 100%
}

 

.left-bottomは左下を基準にトリミングし、.right-bottomは右下を基準にトリミングしています。

また%ではなくpxで指定することもできます。画像に応じて好きなように指定するといいでしょう。

 

余白を表示する

画像をトリミングせずに、余白を残してボックスの中央に画像を表示したい場合は、object-fit: contain;を指定します。

画像の幅か高さのどちらかの最大幅を基準に、指定した大きさで余白を作ることができます。

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

 

object-fitで使える値一覧

object-fitの使い方を解説してきましたが、他にも指定できる値はたくさんあるので紹介しておきます。

 

fill

ボックス内を満たすように縦横比を自動で変えながらトリミングします。

 

cover

縦横比を保持しながら、ボックスを覆うようにリサイズされます。幅か高さのどちらかのうち小さい方を基準にして自動的にトリミングします。

 

contain

縦横比を保持しながらボックスに全て収まるようにリサイズされます。はバカ高さのt¥どちらかのうち大きい方を基準にして、余った部分は余白になります。

 

none

トリミングをせずにそのまま表示します。

 

scale-down

none と contain のうち、小さい方のサイズに合わせて表示します。

 

IE/Edgeに対応させるには

object-fitはこのように使いやすくて便利なプロパティなのですが、残念ながらIEとEdgeには対応していません。

対応させるにはobject-fit-imagesを使うのがいいと思います。

Githubからobject-fit-imagesのファイルをダウンロードしましょう。distフォルダ内にあるofi.min.jsを使用します。このファイルをHTMLで読み込みましょう。

<script src="js/ofi.min.js"></script>

 

そうしたらimgタグを使ってHTMLで画像を表示します。その際、object-fit-imgというクラスを付与しましょう。

次にCSSでobject-fitを指定します。

普通に指定するのに加え、IEに対応させるためにfont-family: ‘object-fit: contain;’も一緒に指定します。

.object-fit-img {
object-fit: contain;
font-family: 'object-fit: contain;'
}

 

object-position も一緒に指定したい場合は font-family にも記述します。

.object-fit-img {
object-fit: cover;
object-position: bottom;
font-family: 'object-fit: cover; object-position: bottom;'
}

 

最後にスクリプトを呼び出せばokです。

<script>
objectFitImages();
</script>

 

この記述方法だと全ての画像に対応しますが、任意のクラスが与えられている画像のみに対応させたい場合はそのセレクタを指定しましょう。

今回はobject-fit-imgクラスが付いている画像を指定したいので、以下のように指定します。

<script>
objectFitImages('img.object-fit-img');
</script>

 

これでIEでもEdgeでも表示できるようになりました。

object-fitプロパティを使えばPhotoshopで毎回リサイズする手間も省けて便利です。ぜひ使ってみてください。