Set Aspect Ratio Of Element In Vue.js

Install & Download:

# Yarn
$ yarn add v-aspect-ratio
# NPM
$ npm install v-aspect-ratio --save

Description:

A Vue.js directive allows you to set and preserve the aspect ratio of an element no matter how you resize the viewport.

How to use it:

1. Install and import the aspect ratio directive.

import Vue from "vue";
import AspectRatio from "v-aspect-ratio";
// as a global plugin
Vue.use(AspectRatio);
// as a global directive
Vue.directive("aspect-ratio", AspectRatio.directive)
// as a local directive
export default {
  name: "YourAwesomeComponent",
  directives: {
    "aspect-ratio": AspectRatio.directive
  }
}

2. Set the aspect ratio of an element.

<template>
<div v-aspect-ratio="'16:9'"></div>
<div v-aspect-ratio="'4:3'"></div>
<div v-aspect-ratio="'1:1'"></div>
<div v-aspect-ratio="'5:4'"></div>
</template>

Preview:

Changelog:

09/26/2020

• v2.0.0