A Vue.js 2.0 images fill directives

by Vue.js Examples

vue-imagefill

The Vue directive for making images fill their containers.

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

GitHub