Vue.jsで画像のトリミング表示を行う「vue-object-fit」

vue-object-fitとは

vue-object-fitは、画像サイズを変更せずにトリミング表示を行うコンポーネントライブラリです。

画像をSVGに取り込むため方式な為、メジャーなブラウザなら問題無く使用することが可能です。

 

【動画サイズ:1MB】

 

環境

Vue 2.6.10
vue-object-fit 1.0.6

 

インストール

以下のnpmCDNを使ってインストールします。

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
メソッドを設定

上記で取得したVueObjectFitVue.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に加味していくとの話があるので、このライブラリは有効な手になると思います。

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Grid, UI Layout, vue.js, ライブラリ
-, , , ,