Maintain The Aspect Ratio Of Element In Vue – keep-ratio

Install & Download:

vue-keep-ratio

Description:

keep-ratio is a Vue component that maintains the aspect ratio of your element using the CSS aspect-ratio attribute.

How to use it:

1. Import and register the keep-ratio component.

import VueKeepRatio from "vue-keep-ratio";
// register globally
Vue.use(VueKeepRatio);
// register locally
export default {
  components: {
    VueKeepRatio
  }
  // ...
}

2. Add the VueKeepRatio component to the template and specify the aspect ratio.

<template>
  <VueKeepRatio :ratio="4 / 3">
    4:3
  </VueKeepRatio>
</template>

3. More component props.

<template>
  <VueKeepRatio :ratio="4 / 3">
    4:3
  </VueKeepRatio>
</template>

Preview: