https://github.com/ddvjs/vue-imagefill

The Vue directive for making images fill their containers
https://github.com/ddvjs/vue-imagefill

image-fill imagefill vue vue-imagefill

Last synced: 4 months ago
JSON representation

The Vue directive for making images fill their containers

• Host: GitHub
• URL: https://github.com/ddvjs/vue-imagefill
• Owner: ddvjs
• Created: 2018-05-17T10:47:55.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-02T03:43:28.000Z (over 3 years ago)
• Last Synced: 2025-08-09T18:45:45.800Z (10 months ago)
• Topics: image-fill, imagefill, vue, vue-imagefill
• Language: JavaScript
• Size: 1.38 MB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# vue-imagefill

>A Vue.js 2.0 images fill directives

## Install

```shell

$ npm install vue-imagefill

```

## Usage

```html

  


    


      

    

  


```

```javascript

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')

    }

  }

}

```

```style

.image-wrap {

  width: 200px;

  overflow: hidden;

  margin: 150px auto;

}

img {

  width: 100%;

}

```

![demo](http://2.img.sic.wiki//upload/other/62d9c1575F0b92744242E9D582.jpg)

## Options

|directives|description|default|options|

|:---|---|---|---|

| `v-flex`|image scaling. width/height, example: `v-flex="150/200"`|`1`|`Number`|

| `v-center`|image src or none|