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

画像のサイズを統一するには、Photoshopなどでリサイズする方法が一般的ですが、CSSを使って画像をトリミングし、サイズを統一する方法もあります。

使うのは「object-fit」プロパティ。一行追加するだけなので非常に簡単です。

CSSを以下のように設定します。

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

3行目の「object-fit」がポイントです。
実際にやってみます。

See the Pen
object-fit by Show Design Lab (@ShowDesignLab)
on CodePen.

 

トリミングせずに余白を表示させる

前述のようにトリミングをせずに、決められたサイズの中に画像をフィットさせて余白を表示させることも可能です。
その場合は、以下のようにCSSを設定します。

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

実際にやってみるとこんな感じです。

See the Pen
object-fit 2 by Show Design Lab (@ShowDesignLab)
on CodePen.

わかりやすいように、背景を黒にしています。

 

IE/Edgeに対応させる

とても便利で簡単な「object-fit」ですが、ひとつ問題があります。
それは、IEとEdgeがこのプロパティに対応していないこと。

様々な方法があるようですが、今回は「object-fit-images」を使った対応方法を紹介します。

まずはGithubから「object-fit-images」をダウンロードし、「dist」フォルダー内にある「ofi.min.js」を利用します。ファイルを保存したらHTMLで読み込みます。

IE/Edge以外のブラウザに対応させるため、CSSで「object-fit」の記述をします。さらにIE/Edgeに対応させるための特別スタイルとして「font-family: ‘object-fit: contain;’」を付け足します。

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

最後にHTMLの