herbertyoung/vue-img-fit-directive

A Vue.js directive to resize img to fit its container.

vue-img-fit-directive

A Vue.js directive to resize img to fit its container.

Installation

npm install vue-img-fit-directive -S

Or:

yarn add vue-img-fit-directive

Initialization

For global use:

// main.js
import Vue from 'vue';
import { imgFit } from 'vue-img-fit-directive';

Vue.directive('imgFit', imgFit);

For Vue Single-File Component (SFC) use:

// component.vue
import { imgFit } from 'vue-img-fit-directive';

export default {
  name: 'ComponentName',
  // ...
  directives: { imgFit }
};

Usage

<img v-img-fit:cover src="your_image.png">

Modifiers

What is modifiers? See here.

Values

contain

The image is scaled to maintain its aspect ratio and fit its container.

cover

The image is scaled to maintain its aspect ratio while filling its entire container.

Example

<style>
  .img-container {
    width: 200px;
    height: 200px;
  }
</style>
<div class="img-container">
  <img v-img-fit:cover src="test.png">
</div>

License

MIT