Для фотографий возьмите CdsImage — он построен на CdsResponsive и вдобавок умеет ленивую загрузку, заглушку и обрезку кадра. Если нужна не форма одного блока, а колонки страницы — CdsGrid.

Вариации

Соотношение сторон

Свойство aspect-ratio принимает дробь (16/9) или число (1.7778). Ширину задаёт родитель, высоту компонент считает сам — и пересчитывает при каждом изменении ширины. Посчитанная высота работает как минимальная: контент, который в неё не поместился, растянет рамку и собьёт пропорции.

Sandbox Storybook

<script setup lang="ts">
import { CdsResponsive } from '@central-design-system/components';

const ratios = ['16/9', '4/3', '1'];
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-4">
    <div v-for="ratio in ratios" :key="ratio" class="w-[180px]">
      <CdsResponsive :aspect-ratio="ratio">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          {{ ratio }}
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

Размеры

По умолчанию рамка занимает всю ширину родителя. Свойства width, max-width и min-width ограничивают её, а height, max-height и min-height — высоту; числа превращаются в пиксели, строки уходят в CSS как есть.

Sandbox Storybook

<script setup lang="ts">
import { CdsResponsive } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[420px] flex-col gap-4">
    <div>
      <CdsResponsive aspect-ratio="16/9">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          Во всю ширину родителя
        </div>
      </CdsResponsive>
    </div>

    <div>
      <CdsResponsive aspect-ratio="16/9" max-width="260">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          max-width 260
        </div>
      </CdsResponsive>
    </div>

    <div>
      <CdsResponsive aspect-ratio="16/9" width="160">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          width 160
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

Компоновка

Свойство inline переводит рамку в inline-flex — она перестаёт растягиваться и встаёт в строку с соседями. Ширину в этом случае задайте сами: от контента она её не возьмёт.

Sandbox Storybook

<script setup lang="ts">
import { CdsResponsive } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-4">
    <div>
      <CdsResponsive aspect-ratio="4/1">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          Блочный
        </div>
      </CdsResponsive>
    </div>

    <div class="flex flex-wrap gap-4">
      <CdsResponsive inline aspect-ratio="4/1" width="160">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          inline
        </div>
      </CdsResponsive>

      <CdsResponsive inline aspect-ratio="4/1" width="120">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          inline
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

Слоты

Высоту рамки держит невидимая распорка, а контент лежит поверх неё. Отсюда два слота с разными задачами.

Слот	Описание
default	Основной контент в обёртке — она занимает всю рамку целиком
additional	Контент без обёртки, поверх распорки — для подложек и абсолютных слоёв

Свойство content-class вешает классы на обёртку слота default — так задают внутренние отступы и раскладку. Корень компонента спозиционирован (position: relative), поэтому элементы из additional можно раскладывать абсолютно относительно рамки.

Sandbox Storybook

<script setup lang="ts">
import { CdsResponsive } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto w-[360px]">
    <CdsResponsive aspect-ratio="16/9" class="rounded-200" content-class="flex items-end p-3">
      <template #additional>
        <div class="absolute inset-0 bg-surface-secondary" />
        <span class="absolute right-3 top-3 rounded-200 bg-brand-primary px-2 py-1 text-xs text-content-on-dark">
          02:14
        </span>
      </template>

      <p class="text-content-primary">Подпись поверх подложки</p>
    </CdsResponsive>
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Встроенная карта или видео

Карты и видеоплееры приезжают в iframe с собственными пропорциями. Оберните iframe в CdsResponsive с нужным aspect-ratio и растяните его классами h-full w-full — плеер будет одинаково смотреться и на широком мониторе, и на телефоне.

Sandbox Storybook

<script setup lang="ts">
import { CdsIcon, CdsResponsive } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto w-full max-w-[480px]">
    <CdsResponsive aspect-ratio="16/9" class="rounded-200">
      <div
        class="flex h-full flex-col items-center justify-center gap-2 bg-surface-secondary text-content-secondary"
        role="img"
        aria-label="Карта офиса"
      >
        <CdsIcon icon="location" size="lg" />
        <span class="text-sm">Здесь будет карта — iframe на всю рамку</span>
      </div>
    </CdsResponsive>
  </div>
</template>

Сетка плиток

В сетке категорий плитки должны быть квадратными независимо от длины подписи. Значение aspect-ratio="1" даёт квадрат, а ширину каждой плитки задаёт колонка сетки — от числа колонок зависит только размер, но не форма.

Sandbox Storybook

<script setup lang="ts">
import { CdsIcon, CdsResponsive } from '@central-design-system/components';

const categories = [
  { icon: 'delivery', title: 'Логистика' },
  { icon: 'tool', title: 'Оборудование' },
  { icon: 'file', title: 'Услуги' },
  { icon: 'education', title: 'Обучение' }
];
</script>

<template>
  <div class="m-auto grid w-full max-w-[480px] grid-cols-2 gap-4 sm:grid-cols-4">
    <CdsResponsive v-for="category in categories" :key="category.title" aspect-ratio="1" class="rounded-200">
      <button
        type="button"
        class="flex h-full w-full flex-col items-center justify-center gap-2 border-0 bg-surface-secondary text-content-secondary"
      >
        <CdsIcon :icon="category.icon" size="lg" />
        <span class="text-sm">{{ category.title }}</span>
      </button>
    </CdsResponsive>
  </div>
</template>

Место под виджет на время загрузки

Отчёт, график или карта приходят с сервера через секунду-другую. Рамка с пропорциями занимает их место сразу: пока внутри крутится загрузчик, подпись и кнопки под виджетом стоят там же, где окажутся после загрузки.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsLoader, CdsResponsive } from '@central-design-system/components';
import { onMounted, ref } from 'vue';

const loading = ref(true);

const load = () => {
  loading.value = true;

  setTimeout(() => {
    loading.value = false;
  }, 2000);
};

onMounted(load);
</script>

<template>
  <div class="m-auto flex w-full max-w-[420px] flex-col gap-3">
    <CdsResponsive aspect-ratio="16/9" class="rounded-200">
      <div class="flex h-full items-center justify-center bg-surface-secondary text-content-secondary">
        <CdsLoader v-if="loading" description="Загружаем отчёт" />
        <span v-else class="text-sm">Отчёт за июль: 128 закупок</span>
      </div>
    </CdsResponsive>

    <p class="text-sm text-content-secondary">Подпись под виджетом остаётся на месте всё время загрузки.</p>

    <CdsButton
      class="self-start"
      variant="soft"
      color="neutral"
      text="Загрузить заново"
      :disabled="loading"
      @click="load"
    />
  </div>
</template>

Переключение пропорций

Значение aspect-ratio реактивно, а смена высоты анимирована — переключатель кадрирования не дёргает соседние блоки.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsButtonToggle, CdsResponsive } from '@central-design-system/components';
import { computed, ref } from 'vue';

const ratios = ['16/9', '4/3', '1'];
const selected = ref(0);

const ratio = computed(() => ratios[selected.value]);
</script>

<template>
  <div class="m-auto flex w-full max-w-[420px] flex-col items-center gap-4">
    <CdsButtonToggle v-model="selected" variant="soft" color="neutral" mandatory>
      <CdsButton v-for="item in ratios" :key="item" :text="item" />
    </CdsButtonToggle>

    <div class="w-full">
      <CdsResponsive :aspect-ratio="ratio" class="rounded-200">
        <div class="flex h-full items-center justify-center bg-surface-secondary text-content-secondary">
          {{ ratio }}
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
aspectRatio	string | number | undefined	—	Соотношение сторон контента. Например 1.7778 (16/9) или '4/3'.
contentClass	any	—	CSS-класс, применяемый к обёртке контента.
height	string | number | undefined	—	Высота компонента
inline	boolean | undefined	—	Отображает компонент как inline-блок (inline-flex) вместо блочного.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
additional	any	Дополнительный контент, отображаемый поверх sizer вне обёртки контента.
default	any	Основной контент компонента, обёрнутый с сохранением соотношения сторон.