Aspect Ratio

Import

import {AspectRatio} from '@astryxdesign/core/AspectRatio';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

Maintains a fixed width-to-height ratio for its children, regardless of screen size. Use it for media containers like videos, images, thumbnails, or any content that needs consi...

Important props

이 컴포넌트는 주요 variant prop보다 children/compound pattern 중심으로 사용합니다.

Theming targets

Best practices

• DoExpress the ratio as a fraction like `16/9` or `4/3` for readability.
• DoUse for media that needs consistent proportions across screen sizes.
• Do notUse for general layout containers; use standard layout components instead.
• Do notNest AspectRatio containers; one level is sufficient.