v-object-fit

v-object-fit directive

Usage no npm install needed!

<script type="module">
  import vObjectFit from 'https://cdn.skypack.dev/v-object-fit';
</script>

| npm install v-object-fit | yarn add v-object-fit | |--|--|

import Vue from 'vue';
import vObjectFit from 'v-object-fit';
Vue.directive('object-fit', vObjectFit);

<img src="https://picsum.photos/536/354" alt="Image Alt" title="Image Title" v-object-fit>

By default object-fit will be cover, if you want to use other options, you can do it like this:

<img src="https://picsum.photos/536/354" alt="..." title="..." v-object-fit="contain">