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

<ply-aspect-ratio ratio="16/9" class="rounded-lg">
  <img src="hero.jpg" alt="" class="h-full w-full object-cover" />
</ply-aspect-ratio>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-aspect-ratio-example',
  imports: [
    AspectRatioComponent
  ],
  template: `...`
})
export class AspectRatioExampleComponent {}

Install

bash

npx ply-ui-cli add aspect-ratio

Installation

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

bash

npx ply-ui-cli add aspect-ratio

API Reference

For AI agents

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

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-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
`ply-aspect-ratio`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-aspect-ratio`	`ratio`	`unknown`	`'16/9'`	CSS `aspect-ratio` value (`16/9`, `1`, `4/3`, …).

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).