object-fit-imagesをVue.jsで実装 - 親バカエンジニアのナレッジ帳

画像を綺麗にトリミングしてくれるcssのプロパティにobject-fitがありますよね。
大きさが均一ではない多くの画像を扱うサービスでは非常に有用なプロパティです。
そんなobject-fitですが、全てのブラウザに対応できていないことが欠点ですね。

IEやEdgeなどに対応させる場合は、object-fit-imagesというJavascriptのライブラリを使用する必要があるのです。

ライブラリのダウンロードにあたっては、Githubなどからソースコードを落としてscriptタグで読み込む方法がまずありますが、npmでダウンロードしてインポートする方法も簡単にできます。

まずはnpmでダウンロードします。

npm i object-fit-images

次にソースコード内に以下を記入しましょう。

import objectFitImages from 'object-fit-images'
// 実行させたい箇所に以下を記入
objectFitImages()

そして最後に該当するimgタグのcssに以下の記述をしてください。

img {
  object-fit: cover; // 例としてcoverを入れています
  font-family: 'object-fit: cover';
}

以上です。
非常に簡単に対応できますよね。