Skip to content
A component to render defined aspect ratio elements
Vue JavaScript HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets add responsiveness example to readme Nov 30, 2019
dist update dist Nov 30, 2019
public init Nov 30, 2019
src add responsiveness example to readme Nov 30, 2019
tests first commit - add project Nov 30, 2019
LICENSE Initial commit Nov 30, 2019 add responsiveness example to readme Nov 30, 2019
babel.config.js init Nov 30, 2019
cypress.json init Nov 30, 2019
jest.config.js init Nov 30, 2019
package-lock.json first commit - add project Nov 30, 2019
package.json add links in package.json Nov 30, 2019
postcss.config.js init Nov 30, 2019



A component to render a certain aspect ratio element without javascript computations.
It exposes a default slot that will have the desided ratio.
Weights 3.8kb not gzipped. No dependencies.
100% responsive

responsiveness gif

How to install and use

To install the package in your application just type

npm install vue-aspect-ratio

Then, to install as a global component

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

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

Or you can register locally in one of your components as follows

import VueAspectRatio from "vue-aspect-ratio";

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

Using in templates

<div class="my-container">
    <vue-aspect-ratio ar="16:9" width="640px">
        <div>your content goes here</div>

NOTE: You may need to set in css "height: 100%" on your content that goes inside vue-aspect-ratio to fill the entire space if your content is not long enough.

Parameters and events

Component props:

Name Type Mandatory Example Description
ar String false "16:9" the aspect ratio
width String false "640px" the css value of the width to set on the element

It does not emit any event


The project is opened to contributes, suggestions and improvements. You can use the Issues section.

Project setup

Fork the project, open it up and type

npm install

To run the example page, it will open a dev server listening to localhost:8080 (usually), type:

npm run dev

To build for production

npm run build

To lint the project

npm run lint

To prepare for pubblication

npm run prepublish


The project uses Cypress If you want to open the interactive cypress dashboard to run and check tests

npm run test:open

If you instead just want to run the tests in headless mode

npm run test

Note: tests required dev server to be up and running

Author and License

Alberto De Agostini

Licensed under MIT

You can’t perform that action at this time.