Preserve Aspect Ratio Of An Element In Vue

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>

Download Details:

Author: albertodeago

Live Demo: https://raw.githubusercontent.com/albertodeago/vue-aspect-ratio/master/assets/responsive.gif

Download Link: https://github.com/albertodeago/vue-aspect-ratio/archive/master.zip

Official Website: https://github.com/albertodeago/vue-aspect-ratio

Install & Download:

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

Add Comment