An image container with a fixed aspect ratio

Usage no npm install needed!

<script type="module">
  import aplVueArImage from 'https://cdn.skypack.dev/apl-vue-ar-image';


A Simple Vue HTML Image Component With A Fixed Aspect Ratio

Use this image component when you want to display images with a fixed aspect ratio, defined by you, like: 1/1 or 16/9... or any other ratio.

The width of the image will be 100% of the parent container. The component will determine the image height, so that it will always have the given aspect ratio.

This component uses the apl-vue-ar-container package to set the aspect ratio.


$ npm install apl-vue-ar-image


$ yarn add apl-vue-ar-image


In a Vue file:

import ArImage from 'apl-vue-ar-image';

export default {
    components: {
        'ar-image': ArImage,


In a js file (like Laravel's app.js):

window.Vue = require('vue');

Vue.component('ar-image', require('apl-vue-ar-image').default);

const app = new Vue({
    el: '#app',

Then in your HTML:

<ar-image ar="4/3" src="/path/to/an/image.jpg" fit="cover"></ar-image>


  • ar - (mandatory) The aspect ratio of the image, as a string with the format: WIDTH/HEIGHT (e.g. 1/1, 16/9, 4/3 etc.)
  • src - (mandatory) The url to the image to be displayed
  • fit - (optional | default: cover) How to fit the image in the container with the fixed aspect ratio (options: cover, contain, fill, none, scale-down) (check CSS: object-fit)


Although you can add any class to the container, there is not much that makes sense, other than a simple border. I recommend styling the parent container if you want borders with padding or other specific styling.