CSSだけで画像をトリミングしてくれるobject-fitについて

案件で時々あるのが、「サイズがバラバラの大量にある画像素材を同じサイズで見せたい」なんてことがあります。

そういった時にはobject-fitというCSSプロパティがオススメです!

このプロパティは縦横比を保ったままトリミングしてくれるので上記のような場合や、サイトの更新担当者がPhotoshopなど使えない場合の案件なんかに使えますよ!!

それではこちらのハシビロコウの素材を使って実際の使い方を紹介していきます。

画像のトリミング

object-fitプロパティの値は5種類あり、こちらはその一覧です。

fill
要素のコンテンツボックス全体を埋めるサイズになります。
cover
置換コンテンツは要素のコンテンツボックス内にぴったり合うサイズになりますが、アスペクト比を維持します。
contain
置換コンテンツは要素のコンテンツボックス全体を埋めるサイズになりますが、アスペクト比を維持します。
none
置換コンテンツは、要素のコンテンツボックスの中でリサイズしません。
scale-down
コンテンツは none または contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

ソースを見るとわかりますが、実際にトリミングを指定をするのは以下の1行だけです。

任意の位置でトリミング

object-fit: coverを使った場合は、任意の位置でトリミングが可能になります。

設定の仕方はこんな感じです。

やっていることはbackground-positionプロパティと同じでobjeft-position: 0 0;なら左上、object-position: 100% 100%;なら右下になります。

IE対応について

便利なobject-fitですが、当たり前のようにIEやEdge15以下には対応していません…。

先述のブラウザに対応する為の手法としてメジャーなのが、object-fit-imagesというjQueryライブラリを使ったやり方です。

ライブラリを設置したら、以下のようにスクリプトを実行します。

ただ上記の書き方だとすべての画像に適応されてしまうので、基本的には特定のクラスのみ対応するように実行します。

次にCSSの設定も行います。

object-positionも合わせて設定する場合はこんな感じ。

これでIEやEdgeでもobject-fitが適応されてるはずです!

ちなみに、スクリプトの実行は適応させる要素より下に記述しないと動かないようなので、/body直前にでも設置してください。
自分はこれがわからず半日ほど無駄にしましたw

また、object-fit: cover;だけじゃなくobject-fit: contain;も同時に使いたい場合は、同じようにCSSを設定して該当のクラス毎にスクリプトを実行します。

自分の場合は上記の記述でどちらも適応させられたんですが、もっとスマートなやり方があれば誰か教えてくださいm(_ _)m