Set Aspect Ratio Of Element In Vue.js


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

// 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.

<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>


Set Aspect Ratio Of Element In Vue.js

Download Details:

Author: andrewvasilchuk

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add v-aspect-ratio

$ npm install v-aspect-ratio --save

You Might Be Interested In:

Add Comment