|
| 1 | +# Aspect |
| 2 | + |
| 3 | +> The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content. |
| 4 | +> When the content is longer than the available height, then the component will expand vertically to |
| 5 | +> fit all content. If the content is shorter than the computed aspect height, the component will |
| 6 | +> ensure a minimum height is maintained. |
| 7 | +
|
| 8 | +## Overview |
| 9 | + |
| 10 | +The `<b-aspect>` component was introduced in BootstrapVue `v2.9.0`. |
| 11 | + |
| 12 | +The default [aspect](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>) ratio is `1:1` (ratio of |
| 13 | +`1`), which makes the height always be at least the same as the width. The `aspect` prop can be used |
| 14 | +to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or |
| 15 | +`'4:3'`. |
| 16 | + |
| 17 | +The width will always be 100% of the available width in the parent element/component. |
| 18 | + |
| 19 | +```html |
| 20 | +<template> |
| 21 | + <div> |
| 22 | + <b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3"> |
| 23 | + <b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-input> |
| 24 | + </b-form-group> |
| 25 | + <b-card> |
| 26 | + <b-aspect :aspect="aspect"> |
| 27 | + This will always be an aspect of "{{ aspect }}", |
| 28 | + except when the content is too tall. |
| 29 | + </b-aspect> |
| 30 | + </b-card> |
| 31 | + </div> |
| 32 | +</template> |
| 33 | + |
| 34 | +<script> |
| 35 | + export default { |
| 36 | + data() { |
| 37 | + return { |
| 38 | + aspect: '16:9', |
| 39 | + aspects: [ |
| 40 | + { text: '4:3 (SD)', value: '4:3' }, |
| 41 | + { text: '1:1 (Square)', value: '1:1' }, |
| 42 | + { text: '16:9 (HD)', value: '16:9' }, |
| 43 | + { text: '1.85:1 (Widescreen)', value: '1.85:1' }, |
| 44 | + { text: '2:1 (Univisium/Superscope)', value: '2:1' }, |
| 45 | + { text: '21:9 (Anamorphic)', value: '21:9' }, |
| 46 | + { text: '1.43:1 (IMAX)', value: '1.43:1' }, |
| 47 | + { text: '3:2 (35mm Film)', value: '3:2' }, |
| 48 | + { text: '3:1 (APS-P)', value: '3:1' }, |
| 49 | + { text: '4/3 (Same as 4:3)', value: 4 / 3 }, |
| 50 | + { text: '16/9 (Same as 16:9)', value: 16 / 9 }, |
| 51 | + { text: '3 (Same as 3:1)', value: 3 }, |
| 52 | + { text: '2 (Same as 2:1)', value: 2 }, |
| 53 | + { text: '1.85 (Same as 1.85:1)', value: 1.85 }, |
| 54 | + { text: '1.5', value: 1.5 }, |
| 55 | + { text: '1 (Same as 1:1)', value: 1 } |
| 56 | + ] |
| 57 | + } |
| 58 | + } |
| 59 | + } |
| 60 | +</script> |
| 61 | + |
| 62 | +<!-- b-aspect.vue --> |
| 63 | +``` |
| 64 | + |
| 65 | +## See also |
| 66 | + |
| 67 | +- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc) |
0 commit comments