區塊

<b-aspect> 元件可用於維持內容的最小回應式縱橫比。當內容比可用的高度還長時，元件便會垂直展開以容納所有內容。如果內容比計算出的縱橫比高度還短，元件便會確保維持最小高度。

自 v2.9.0 起在 BootstrapVue 中提供

概觀

預設縱橫比是 1:1（1 的比率），這表示高度永遠至少會和寬度一樣。可使用 aspect prop 指定任意縱橫比（例如 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 -->

另請參閱

有關回應式嵌入（影片、iFrame 等）的 <b-embed> 元件

元件參考

`<b-aspect>`

檢視原始碼

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

屬性

所有屬性的預設值都可以在全域中設定。

屬性	類型	預設	說明
`aspect`	`Number` 或 `String`	`'1:1'`	以寬高比例表示的寬高比（例如 `1.5`）或 `width:height` 字串（例如 '16:9'）
`tag`	`字串`	`'div'`	設定要渲染的取代預設標籤的 HTML 標籤

插槽

名稱	說明
`預設`	要放入寬高比例中的內容

匯入個別元件

你可以藉由下列命名匯出，將個別元件匯入你的專案中

元件	命名匯出	匯入路徑
`<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)