Аспект

Компонент <b-aspect> может использоваться для поддержания минимального адаптивного соотношения сторон содержимого. Когда содержимое превышает доступную высоту, компонент будет расширяться по вертикали, чтобы вместить все содержимое. Если содержимое короче, чем вычисленная высота аспекта, компонент будет обеспечивать поддержание минимальной высоты.

Доступно в BootstrapVue с v2.9.0

Обзор

По умолчанию aspect соотношение равно 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">
        Это всегда будет аспект "", за исключением случаев, когда содержание слишком высокое.
      </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> для адаптивных встраиваний (видео, фреймы и т. д.)

Справочник по компонентам

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