【CSS/JS】object-fitプロパティで画像をトリミングしよう

ページに画像を挿入した時に、画像のサイズがまばらになるのが気になったことはありませんか？
とはいっても、1枚ずつ画像をトリミングしてアップし直すのも面倒ですよね。
CSSを使えば、画像をトリミングした状態で表示することが可能です。画像そのものを切り取る必要はありません。
今回は、CSSを使った画像のトリミング方法を紹介します。

object-fitプロパティ

CSSで画像をトリミングするには、object-fitプロパティを使用します。
img要素だけでなく、video要素などにも使用可能です。
値は5種類あります。順番に見ていきましょう。
今回使用するのは幅400px、高さ300pxの以下の画像です。

値：fill

初期値です。トリミングは行われず、縦横がボックスサイズに合わせた形で画像が表示されます。
そのため、元画像と異なるwidthとheightを設定した場合は、引き延ばされた形になってしまいます。

値：contain

トリミングは行われませんが、縦横比を維持したままボックスサイズに合わせて画像が拡大・縮小表示されます。
横長のボックス画像の場合は幅に合わせて拡大・縮小、縦長のボックスの場合は高さに合わせて拡大・縮小が行われるイメージです。

値：cover

ボックスサイズに合わせて画像が拡大・縮小されます。
さらに、ボックスサイズに合わせてトリミングされるため、余白ができません。
これがcontainとの違いです。
例の画像の場合、まず高さに合わせて画像が縮小された後、幅がトリミングされています。

値：none

画像は拡大・縮小されません。
そのうえで、ボックスサイズに合わせてトリミングされます。

値：scale-down

noneかcontainのいずれかの指定が採用されます。
ボックスサイズより画像が大きい場合はcontain、小さい場合はnoneが採用されます。
例の場合はボックスサイズより画像が大きいため、containと同じ表示になっています。

object-positionプロパティ

トリミングする画像の位置を任意で指定することができます。
object-position: 横の位置 縦の位置;

初期値（指定なし）の場合は中央になります。
値は%や、pxなど単位を付けた数値、left、topといったキーワードも使用できます。

中央でトリミング（初期値）

左上でトリミング

左下でトリミング

右上でトリミング

右下でトリミング

IEでの実装について

便利なobject-fitプロパティですが、残念ながらIEでは対応していません。
IEでも対応させたいという時に便利なjsライブラリ「object-fit-images」をご紹介します。

①ダウンロードする

GitHubからjsをダウンロードします。
「Code」と書かれた緑のボタンから、zipをダウンロードできます。
展開したフォルダから、distフォルダを開くと「ofi.js」と「ofi.min.js」が格納されています。
いずれも内容は同じですが、minのほうが軽量版になります。任意のファイルを使用してください。
今回は「ofi.min.js」を使用します。

②jsを読み込む

bodyの閉じタグ直前にscriptタグを記述して、格納場所からファイルを読み込みます。

③トリミングしたい画像のimgタグにクラスを追加する

クラス名は任意ですが、④でCSSを読み込むために使用します。

④CSSを追加する

③で指定したクラス名で、トリミング処理を追加します。
「object-fit-images」を使用するには、font-familyプロパティを指定します。
object-fitだけでなく、object-positionも指定できます。

⑤スクリプトを実行する

②でjsを読み込んだ記述より後に、以下の記述を追加してスクリプトを実行します。

これで、IEでもそれ以外のブラウザと同じようにトリミングすることができます。

まとめ

画像の切り取りが不要になるので、ブログなど投稿タイプのページで特に重宝するプロパティです。
IEの制約もありますが上記の方法で対応できますので、活用してみてください。