方面

<b-aspect> 组件可用于维护内容的最小响应宽高比。当内容长于可用高度时，组件将垂直扩展以容纳所有内容。如果内容短于计算出的宽高比，组件将确保维持最小高度。

自 v2.9.0 起在 BootstrapVue 中可用

概述

默认的宽高比为 1:1（1 的比率），这使得高度始终至少与宽度相同。aspect 属性可用于指定任意宽高比（即 1.5）或作为字符串的比率，例如 '16:9' 或 '4:3'。

宽度始终为父元素/组件中可用宽度的 100%。

<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 -->

另请参阅

<b-embed> 组件用于响应式嵌入（视频、iframe 等）。

组件参考

`<b-aspect>`

查看源代码

<b-aspect> 属性
<b-aspect> 插槽

属性

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`aspect`	`Number` 或 `String`	`'1:1'`	宽高比数字比率（如 `1.5`）或 `width:height` 字符串（如 '16:9'）的纵横比。
`tag`	`String`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签。

插槽

名称	说明
`default`	要放置在纵横比中的内容

导入各个组件

您可以通过以下命名导出将各个组件导入到您的项目中

组件	命名导出	导入路径
`<b-aspect>`	`BAspect`	`bootstrap-vue`

示例

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

作为 Vue.js 插件导入

此插件包含上述所有列出的各个组件。插件还包括任何组件别名。

命名导出	导入路径
`AspectPlugin`	`bootstrap-vue`

示例

import { AspectPlugin } from 'bootstrap-vue'
Vue.use(AspectPlugin)