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:
vue-keep-ratio
1. Import and record the retention component.
import VueKeepRatio from "vue-keep-ratio";
// register globally
Vue.use(VueKeepRatio);
// register locally
export default {
components: {
VueKeepRatio
}
// ...
}2. Add the VueKeepRatio component to the template and select the aspect ratio.
<template>
<VueKeepRatio :ratio="4 / 3">
4:3
</VueKeepRatio>
</template>3. More component props.
<template>
<VueKeepRatio :ratio="4 / 3">
4:3
</VueKeepRatio>
</template>API
Props
- 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.