Maintain The Aspect Ratio Of Element In 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:

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

Download Details:

Author: AielloChan

Live Demo: https://codepen.io/AielloChan/pen/GRNqJzd

Download Link: https://github.com/AielloChan/vue-keep-ratio/archive/refs/heads/master.zip

Official Website: https://github.com/AielloChan/vue-keep-ratio

Install & Download:

vue-keep-ratio

You Might Be Interested In:

Add Comment