Компонент AspectRatio предназначен для
сохранения пропорций вложенного контента, независимо от размеров
контейнера. Он особенно полезен для видео, изображений или любых
элементов, которые должны сохранять фиксированное соотношение ширины к
высоте при адаптивной верстке.
import { AspectRatio, Box } from "@chakra-ui/react";
В этом примере видео автоматически масштабируется, сохраняя соотношение 16:9.
ratio – числовое значение, задающее
соотношение ширины к высоте. Например, ratio={4/3}.maxW и maxH –
максимальная ширина и высота контейнера.minW и minH – минимальные
размеры контейнера.w и h – фиксированные
размеры. Можно использовать процентные значения для адаптивного
поведения.
В данном примере создается квадратный контейнер с максимальной шириной 400px.
Компонент AspectRatio поддерживает
любые вложенные элементы, но особенно эффективен для элементов с
абсолютным позиционированием, таких как ,
, или
.
Важно, чтобы вложенный элемент занимал 100% ширины и высоты родителя, иначе пропорции не будут соблюдены.
AspectRatio автоматически подстраивается под размер родительского контейнера. Это делает его идеальным для responsive-дизайна.
На мобильных устройствах элемент займет всю ширину
(100%), на планшетах – половину (50%), а на
десктопах – четверть ширины (25%), при этом сохраняя
соотношение 4:3.
AspectRatio хорошо интегрируется с любыми компонентами Chakra, поддерживает все системные пропсы для стилизации:
bg, borderRadius, boxShadow,
overflow
Здесь изображение обрезается по скругленным углам благодаря
overflow="hidden" и borderRadius.
Для видео или аудио плееров AspectRatio обеспечивает правильное отображение на любых устройствах:
Видео сохраняет пропорции 16:9 и масштабируется до ширины 800px без искажений.
AspectRatio можно использовать внутри Flex или Grid, чтобы элементы автоматически выравнивались по сетке и сохраняли пропорции:
Элементы в сетке сохраняют заданные пропорции, независимо от ширины экрана.
title для
доступности.objectFit="cover" или
objectFit="contain" в зависимости от желаемого
эффекта.maxW и maxH помогает
ограничить размеры на больших экранах.ratio={1} удобно использовать для квадратных карточек,
аватаров и миниатюр.AspectRatio отличается от обычного
тем, что сохраняет пропорции вложенного
контента, чего по умолчанию не делает. Это
избавляет от необходимости вручную рассчитывать высоту через padding или
media queries.
// фиксированная высота
// адаптивная высота, сохраняющая пропорции