Preserve Aspect Ratio Of An Element In Vue

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>

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

You Might Be Interested In:

Add Comment