# Aspect Ratio Documentation Displays content while maintaining a specified aspect ratio. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ```svelte an abstract painting

``` ## Architecture - **Root**: The root component which contains the aspect ratio logic ## Structure Here's an overview of how the Aspect Ratio component is structured in code: ```svelte ``` ## Reusable Component If you plan on using a lot of `AspectRatio` components throughout your application, you can create a reusable component that combines the `AspectRatio.Root` and whatever other elements you'd like to render within it. In the following example, we're creating a reusable `MyAspectRatio` component that takes in a `src` prop and renders an `img` element with the `src` prop. MyAspectRatio.svelte ```svelte ``` You can then use the `MyAspectRatio` component in your application like so: +page.svelte ```svelte ``` ## Custom Ratio Use the `ratio` prop to set a custom aspect ratio for the image. ```svelte ``` ## API Reference ### AspectRatio.Root The aspect ratio component. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ratio` | `number` | The desired aspect ratio.`Default: 1` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------------ | ----- | ---------------------------- | ------- | | `data-aspect-ratio-root` | `''` | Present on the root element. | | [Previous Alert Dialog](/docs/components/alert-dialog) [Next Avatar](/docs/components/avatar)