Clinia UI

Aspect Ratio

Keeps an image or video at a fixed ratio as it resizes.

shadcn docs →

When to use

  • An image or a video that must keep its shape as the layout resizes.
  • A placeholder that reserves the space before media loads, so the page doesn't jump.

When not to use

  • A fixed-size thumbnail: set a size-* class on the image.
  • A person's photo: use Avatar.

Install

npx shadcn@latest add @clinia/aspect-ratio
A clinic storefront

Clinia rules

  • Pass ratio as width over height: 16 / 9, 4 / 3, 1.
  • Add overflow-hidden and a radius to the box, and object-cover to the image, so it crops instead of stretching.

Do and don't

A clinician by a window
Do crop the image to the ratio.
A clinician by a window
Don't stretch the image to fill the ratio.

Accessibility

Your responsibility

  • Give every image alt text that says what it shows, or alt="" when it's decorative.
  • The box only sets the shape. A video still needs captions and controls.

How to test

  1. Resize the window: the box keeps its ratio and the image crops, never stretches.
  2. Zoom to 200%: nothing overflows the page.

API

PropValuesDefaultDescription
ratio
number
–

Width divided by height, such as 16 / 9.

All other props come from the native div element.

Related