vue-imagefill

A Vue.js 2.0 images fill directives

Install

$ npm install vue-imagefill

Usage

<template>
  <div>
    <div class="image-wrap" v-flex="1">
      <img v-center="img">
    </div>
  </div>
</template>

import Vue from 'vue'
import vueImagefill from 'vue-imagefill'
import 'vue-imagefill/src/style/vue-imagefill.css'
Vue.use(vueImagefill)

export default {
  data () {
    return {
      img: require('~/assets/images/text.jpg')
    }
  }
}

.image-wrap {
  width: 200px;
  overflow: hidden;
  margin: 150px auto;
}
img {
  width: 100%;
}

Options

directives	description	default	options
v-flex	image scaling. width/height, example: v-flex="150/200"	1	Number
v-center	image src or none