v-ratio

Vue directive for fixed aspect ratio elements.

Installation

Yarn

yarn add @jamescoyle/v-ratio

NPM

npm install @jamescoyle/v-ratio

Global Installation

The following installs the directive globaly for your project. This is recommended for most cases as it is the easiest to set up and use throughout your project.

import Vue from 'vue'
import ratio from '@jamescoyle/v-ratio'

Vue.directive('ratio', ratio)

Local Installation

You can also use this directive by attaching it directly to a component. This method is recommended for components which are desinged to be portble as it packages the dependency into the component.

import ratio from '@jamescoyle/v-ratio'

export default {
    directives: {
        ratio,
    }
}

Usage

<div v-ratio="16/9">16:9 element. Set the width and the height will be automatically set.</div>
<div v-ratio:width="16/9">16:9 element. Set the width and the height will be automatically set.</div>
<div v-ratio:height="16/9">16:9 element. Set the height and the width will be automatically set.</div>

Resize Observer Polyfill

This directive makes use of the resize observer. This means that you will likely need to include a polyfill to improve browser support.

Install the resize observer polyfill and then include the following code wherever you placed the code from the installation section above. This will try to use the native implementation if it exists and then will fall back to the polyfill in browsers which don't support the resize observer.

import ResizeObserverPolyfill from 'resize-observer-polyfill'

const ResizeObserver = window.resizeObserver || ResizeObserverPolyfill

Please note that this may cause issues if browsers don't implement the resize observer in the same way or if the specification changes. I do not believe this will be the case however as the syntax for an observer is very mature at this point and it is unlikely that the resize observer will deviate from other observers.