Aspect Ratio

Wrapper that preserves a width-to-height ratio via CSS aspect-ratio. Project an image or any block inside; the inner slot is stretched to fill the box.

freenew

Common ratios

16 / 9

4 / 3

1 / 1

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add aspect-ratio

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add aspect-ratio
// Paths are relative to aliases.components (default: src/app/components)
import { AspectRatioComponent } from './aspect-ratio/aspect-ratio.component';

@Component({
  selector: 'app-your-component',
  imports: [
    AspectRatioComponent
  ],
  template: `...`
})
export class YourComponent {}

API for aspect-ratio — generated from JSDoc in the library source.

API reference for aspect-ratio
API	Member	Type	Default	Description
`base-aspect-ratio`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`base-aspect-ratio`	`ratio`	`unknown`	`'16/9'`	CSS `aspect-ratio` value (`16/9`, `1`, `4/3`, …).