{
  "title": "AspectRatio",
  "description": "Wraps children in a container with a fixed width-to-height ratio.",
  "url": "/docs/components/aspect-ratio",
  "since": "0.8.0",
  "tags": [
    "layout"
  ],
  "platform": "both",
  "source": "---\ntitle: AspectRatio\ndescription: Wraps children in a container with a fixed width-to-height ratio.\nsince: 0.8.0\ntags: [layout]\nplatform: both\ncategory: layout\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"AspectRatio\" />\n\n## At a glance\n\n- Use to constrain images, videos, maps, or any media to a known ratio.\n- Works identically on web and native — React Native's `aspectRatio` style\n  property maps to the CSS `aspect-ratio` property via react-native-web.\n\n## Preview\n\n<Preview name=\"aspect-ratio-basic\" />\n\n## Usage\n\n```tsx\nimport { AspectRatio } from '@nori-ui/core';\n\n// 16:9 video thumbnail\n<AspectRatio ratio={16 / 9}>\n  <Image source={thumbnail} style={{ width: '100%', height: '100%' }} />\n</AspectRatio>\n\n// Square avatar placeholder\n<AspectRatio ratio={1} style={{ width: 80 }}>\n  <View style={{ flex: 1, backgroundColor: '#e2e8f0' }} />\n</AspectRatio>\n```\n\n## Common ratios\n\n| Ratio | Value | Use |\n|-------|-------|-----|\n| `16 / 9` | 1.777 | Video, banners |\n| `4 / 3` | 1.333 | Classic photo |\n| `1` | 1.0 | Square avatar, card |\n| `2 / 3` | 0.667 | Portrait photo, poster |\n| `21 / 9` | 2.333 | Ultrawide cinema |\n\n## Props\n\n<PropsTable component=\"AspectRatio\" />\n"
}