A Simple Vue HTML Container With A Fixed Aspect Ratio
Use this container when you want a div with a fixed aspect ratio, defined by you, like: 1/1 or 16/9... or any other ratio.
The width of the container will be 100% of the parent container. The container will set its height, so that it will always have the given aspect ratio. Include in the container any HTML that you want.
Install
$ npm install apl-vue-ar-container
or
$ yarn add apl-vue-ar-container
Usage
In a Vue file:
; components: 'ar-container': ArContainer //...
In a js file (like Laravel's app.js):
windowVue = ; Vue; const app = el: '#app';
Then in your HTML:
Parameters
- ar - (mandatory) The aspect ratio of the container, as a string with the format: WIDTH/HEIGHT (e.g. 1/1, 16/9, 4/3 etc.)
Styling
The container has position: relative
, so you can insert an absolutely positioned element and stretch it to the limits of the container.
For example, you can insert an image you want to display with a fixed aspect ratio.
You can assign any classes to the container. The container and its inner HTML elements only have the minimum inline styling to fulfill their purpose.