Исходник ↗Песочница ↗

AspectRatio

Компонент позволяет поддерживать заданное соотношение сторон для вложенного контента. Его можно использовать для отображения изображений, карт, видео и других медиа-файлов.

Загружается...

Контент

Элемент, который должен сохранять свои пропорции при изменении родительского контейнера, передаётся в свойство children.

Пропорции

Свойство ratio определяет соотношение сторон (ширина/высота) контейнера. Например, числовое значение 16 / 9 создаст контейнер с соотношением "16:9", 1 создаст квадратный контейнер, а 0.5 создаст контейнер, где высота в два раза больше ширины.

Принимает числовые или строковые (для токенов в виде CSS-переменных, например, var(--css-aspect-ratio-var)) значения.

Режим отображения

Задаётся свойством mode.

  • "stretch" — вложенный контент растягивается на весь родительский контейнер в соответствии с указанным ratio (по умолчанию);
  • "none" — сохраняются исходные размеры контента.

Свойства и методы

СвойствоОписание
baseStyleCSSProperties

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство style.

По умолчанию: -
classNamestring

className для компонента.

По умолчанию: -
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
mode"none" | "stretch"

По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.

По умолчанию: stretch
ratiostring | number

Например:

  • в виде числа: 16 / 9, 4 / 3, 1920 / 1080,
  • в виде css переменной: var(--css-aspect-ratio-var)
  • в виде сложного выражения: calc(<какие-то вычисления>).
По умолчанию: -
Предыдущая
PlatformProvider
Следующая
AdaptiveIconRenderer