Aspect Ratio

Hold a box at a fixed ratio while its width is fluid. Modern CSS aspect-ratio, so no padding-top hack.

src/components/ui/aspect-ratio.tsx

About

From the component's own source, where it was written.

Hold a box at a fixed ratio while its width is fluid.

Modern aspect-ratio makes the old padding-top trick unnecessary; this exists so the ratio is a prop rather than an inline style at every call site.

Install

npx astralyx-ui add aspect-ratio

Usage

import { AspectRatio } from '@/components/ui/aspect-ratio'

<AspectRatio ratio={16 / 9}>
  <img src={cover} alt="" className="size-full object-cover" />
</AspectRatio>

Composer

Change the props and the source below follows.

16 / 9
Props
tsx
<AspectRatio ratio={16 / 9}>
  <img src={cover} alt="" className="size-full object-cover" />
</AspectRatio>

Examples

Common ratios

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

AspectRatio

Hold a box at a fixed ratio while its width is fluid.

Extends ComponentProps<'div'>.

PropTypeDefaultDescription
rationumber16 / 9Width divided by height.