親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

object-fit-imagesをVue.jsで実装


object-fit

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

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

ライブラリをnpmでダウンロード

ライブラリのダウンロードにあたっては、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';
}

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


動かして学ぶ!Vue.js開発入門 (NEXT ONE)

動かして学ぶ!Vue.js開発入門 (NEXT ONE)

Vue.jsでTodoアプリを作ってみよう

Vue.jsでTodoアプリを作ってみよう

日本でいちばんわかりやすいプログラミングのドリル

日本でいちばんわかりやすいプログラミングのドリル

改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ(NextPublishing))

改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ(NextPublishing))