Vue Ratio

Scale with ratio for VueJS

Installation

Use the package manager NodeJS to install @tamnt-work/vue-ratio.

yarn add @tamnt-work/vue-ratio

Usage

Use global

import Vue from "vue";
import VueRatio from "@tamnt-work/vue-ratio";

Vue.use(VueRatio);

OR

Use local

import VueRatio from "@tamnt-work/vue-ratio";

export default {
  components: {
    VueRatio,
  },
};

Use on vue

<vue-ratio ratio="16:9" width="100%">
  <img src="path-to-image.png" alt="" />
</vue-ratio>

Props

ratio

Screen ratio want scales

• Type: string
• Required: false

Example:

• 16:9 or 16/9
• 18:9 or 18/9
• 1:1 or 1/1
• 4:3 or 4/3
• etc...

width

Maximum width you want to display

• Type: string
• Required: false

Contributing

[email protected]

License

MIT