---
description: Компонент позволяет поддерживать заданное соотношение сторон для вложенного контента.
tags: layout
---

<Overview group="utils">

# AspectRatio [tag:component]

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

</Overview>

import { BlockWrapper } from '@/components/wrappers';

{/* @example-description: Изображение в контейнере с фиксированным соотношением сторон `16:9`. */}
<Playground Wrapper={BlockWrapper}>
  ```jsx
  <AspectRatio ratio={16 / 9}>
    <img
      src="https://sun9-35.userapi.com/TH0O6TfKR2O5W8hjgSdzQzHvV_2TGRAXhLHuog/Js_f2L5EMYM.jpg"
      loading="lazy"
      alt="Лаунж зона в розовом неоне"
    />
  </AspectRatio>
  ```
</Playground>

## Контент

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

## Пропорции

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

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

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

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

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

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `className` | `string` | `-` | `className` для компонента. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `mode` | `"none" \| "stretch"` | `stretch` | По умолчанию, вложенный контент будет растягиваться и заполнять весь блок. |
| `**ratio** \*` | `string \| number` | `-` | Например: - в виде числа: 16 / 9, 4 / 3, 1920 / 1080, - в виде css переменной: `var(--css-aspect-ratio-var)` - в виде сложного выражения: `calc(<какие-то вычисления>)`. |