Skip to content

The Vue directive for making images fill their containers

Notifications You must be signed in to change notification settings

ddvjs/vue-imagefill

Repository files navigation

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%;
}

demo

Options

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