# AspectRatio
> Holds images, video and embeds to a fixed width-to-height ratio so layouts never shift.
Category: Layout · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/aspect-ratio
AspectRatio reserves space for images, video and embeds before they load, so the layout does not shift. Its single child fills the box; images and video default to object-fit: cover.
## Import
```tsx
import { AspectRatio } from '@bindshq/stance-react';
```
Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.
## Examples
### 16:9
```tsx
import { AspectRatio } from '@bindshq/stance-react';
const art = (label: string) => (
);
export function Basic() {
return (
{art('Product walkthrough poster')}
);
}
```
### Square
```tsx
import { AspectRatio } from '@bindshq/stance-react';
const art = (label: string) => (
);
export function Square() {
return (
{art('Team avatar')}
);
}
```
### Portrait 3:4
```tsx
import { AspectRatio } from '@bindshq/stance-react';
const art = (label: string) => (
);
export function Portrait() {
return (
{art('Contract cover page')}
);
}
```
## API reference
| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| AspectRatio | `ratio` | `number` | `16 / 9` | Width divided by height. |
## Accessibility
- AspectRatio adds no semantics. Give the media inside it a text alternative.
## Guidelines
**Do**
- Use for any media whose size is known in advance.
**Don’t**
- Put text content inside; it may be clipped.
## Related
- https://stanceui.com/components/image