目次
vue-object-fitとは
vue-object-fitは、画像サイズを変更せずにトリミング表示を行うコンポーネントライブラリです。
画像をSVGに取り込むため方式な為、メジャーなブラウザなら問題無く使用することが可能です。
【動画サイズ:1MB】
環境
Vue | 2.6.10 |
vue-object-fit | 1.0.6 |
インストール
以下のnpm、CDNを使ってインストールします。
npm
npm install --save vue-object-fite
UMD
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-object-fit.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-object-fit.browser.js"></script>
gitリポジトリは以下から取得できます。
導入手順
step
1ライブラリの取り込み
ES6等の場合
import 'vue-object-fit/dist/vue-object-fit.css' import VueObjectFit from 'vue-object-fit/dist/vue-object-fit.common'
UMDの場合
const VueObjectFit = window['VueObjectFit'].default;
step
2メソッドを設定
上記で取得したVueObjectFitをVue.use
に取り込みます。
Vue.use(VueObjectFit); new Vue({ el: '#app', });
step
3テンプレートを準備
各種コンポーネントを設置します。
サンプルはケバブケースで記載しています。
<div id="app"> <object-fit-component url="https://loremflickr.com/1024/768/cat" width="100%" height="500px" :img-width="1024" :img-height="768" meet-or-slice="slice" align="xMidYMid" title="A lovely cat" ></object-fit-component> </div>
サンプル
See the Pen Vue.jsで画像のトリミング表示を行う「vue-object-fit」 by カバの樹 (@kabanoki) on CodePen.dark
さいごに
画像サイズを変更せずにトリミング表示を行うコンポーネントライブラリでした。
今後Googleでは、Core Web VitalをSEOに加味していくとの話があるので、このライブラリは有効な手になると思います。
今日はこの辺でー