Set Aspect Ratio Of Element In Vue.js

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>

Download Details:

Author: andrewvasilchuk

Live Demo: https://codesandbox.io/s/ko425ro4k7

Download Link: https://github.com/andrewvasilchuk/v-aspect-ratio/archive/master.zip

Official Website: https://github.com/andrewvasilchuk/v-aspect-ratio

Last Update: November 26, 2019

Install:

# Yarn
$ yarn add v-aspect-ratio

# NPM
$ npm install v-aspect-ratio --save

You Might Be Interested In:

Add Comment