Preserve Aspect Ratio Of An Element In Vue

Install & Download:

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

Description:

Yet another Vue.js component to preserve the aspect ratio of an element no matter how you resize the viewport.

How to use it:

1. Import & register the component.

import Vue from "vue";
import VueAspectRatio from "vue-aspect-ratio";

export default {
  name: "AmazingComponent",
  props: [myprop],
  components: {
    "vue-aspect-ratio": VueAspectRatio
  }
}

// or
Vue.component("vue-aspect-ratio", VueAspectRatio);

2. Create a new vue-aspect-ratio component in your template and specify the aspect ratio and initial width as follows:

<div class="my-container">
  <vue-aspect-ratio ar="4:3" width="480px">
    <div>Your Content Here</div>
  </vue-aspect-ratio>
</div>