0.1.0 • Published 4 years ago
vue-img-fit-directive v0.1.0
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
0.1.0
4 years ago