Aspect

The <b-aspect> component can be used to maintain a minimum responsive aspect ratio for content. When the content is longer than the available height, then the component will expand vertically to fit all content. If the content is shorter than the computed aspect height, the component will ensure a minimum height is maintained.

Available in BootstrapVue since v2.9.0

Overview

The default aspect ratio is 1:1 (ratio of 1), which makes the height always be at least the same as the width. The aspect prop can be used to specify an arbitrary aspect ratio (i.e. 1.5) or a ratio as a string such as '16:9' or '4:3'.

The width will always be 100% of the available width in the parent element/component.

<template>
  <div>
    <b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3">
      <b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-select>
    </b-form-group>
    <b-card>
      <b-aspect :aspect="aspect">
        This will always be an aspect of "{{ aspect }}",
        except when the content is too tall.
      </b-aspect>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        aspect: '16:9',
        aspects: [
          { text: '4:3 (SD)', value: '4:3' },
          { text: '1:1 (Square)', value: '1:1' },
          { text: '16:9 (HD)', value: '16:9' },
          { text: '1.85:1 (Widescreen)', value: '1.85:1' },
          { text: '2:1 (Univisium/Superscope)', value: '2:1' },
          { text: '21:9 (Anamorphic)', value: '21:9' },
          { text: '1.43:1 (IMAX)', value: '1.43:1' },
          { text: '3:2 (35mm Film)', value: '3:2' },
          { text: '3:1 (APS-P)', value: '3:1' },
          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
          { text: '3 (Same as 3:1)', value: 3 },
          { text: '2 (Same as 2:1)', value: 2 },
          { text: '1.85 (Same as 1.85:1)', value: 1.85 },
          { text: '1.5', value: 1.5 },
          { text: '1 (Same as 1:1)', value: 1 }
        ]
      }
    }
  }
</script>

<!-- b-aspect.vue -->

Component reference

`<b-aspect>`

View source

<b-aspect> Properties
<b-aspect> Slots

Properties

All property default values are globally configurable.

Property	Type	Default	Description
`aspect`	`Number` or `String`	`'1:1'`	Aspect as a width to height numeric ratio (such as `1.5`) or `width:height` string (such as '16:9')
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag

Slots

Name	Description
`default`	Content to place in the aspect

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-aspect>`	`BAspect`	`bootstrap-vue`

Example:

import { BAspect } from 'bootstrap-vue'
Vue.component('b-aspect', BAspect)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`AspectPlugin`	`bootstrap-vue`