A Vue Directive To Keep DOM Aspect Ratio Of Element Library


Keep ratio is a Vue component that maintains the aspect ratio of your element using the CSS aspect ratio attribute.

css aspect ratio, css aspect ratio based on height, tailwind aspect ratio, keep aspect ratio, div aspect ratio, css aspect-ratio media query

How to make use of it:

Install and download:


1. Import and record the retention component.

import VueKeepRatio from "vue-keep-ratio";

// register globally

// register locally
export default {
  components: {
  // ...

2. Add the VueKeepRatio component to the template and select the aspect ratio.

  <VueKeepRatio :ratio="4 / 3">

3. More component props.

  <VueKeepRatio :ratio="4 / 3">



  • ratio: {Number} [ratio=1/1] The ratio you wanna keep, default: 1 / 1.
  • width: {String} Keep width value when dom resized, default.
  • height: {String} Keep width value when dom resized.
  • innerClassName: {String} [innerClassName=”] As the name, it specify inner div wrapper additional class name

Maintain The Aspect Ratio Of Element, vue keep ratio Plugin/Github

See Demo And Download

Official Website(AielloChan): Click Here

This superior jQuery/javascript plugin is developed by AielloChan. For extra Advanced Usages, please go to the official website.