# Aspect ratio (/components/layout/aspect-ratio)
`AspectRatio` locks a frame to an inline-to-block ratio and sizes its direct child to fill the
frame. Use it for media such as an `iframe`, `img`, or `video`. Images and videos use
`objectFit="cover"` by default. Pass another `objectFit` value to change how they fit the frame.
Read [Layout](/docs/layout#choose-a-layout-component) to choose a layout component.
apps/docs/src/examples/aspect-ratio/basic.tsx
```tsx
import { AspectRatio } from '@luke-ui/react/aspect-ratio';
import { Container } from '@luke-ui/react/container';
import { vars } from '@luke-ui/react/theme';
export default () => {
return (
);
};
```
## Choose the rendered element [#choose-the-rendered-element]
AspectRatio uses
[Box's `elementType` and `render` contract](/components/layout/box#choose-the-rendered-element).
apps/docs/src/examples/aspect-ratio/semantic-element.tsx
```tsx
import { AspectRatio } from '@luke-ui/react/aspect-ratio';
import { Container } from '@luke-ui/react/container';
import { vars } from '@luke-ui/react/theme';
export default () => {
return (
);
};
```
## API [#api]
