Aspect Ratio
Constrains content to a fixed width/height ratio.
Overview
Aspect ratio keeps media — images, video embeds, map tiles — at a fixed
proportion while the width flexes with the layout. It is a plain <div>
driven by the CSS aspect-ratio property and renders no surface of its own.
16 : 9
$ npx morpha-ui add aspect-ratioExamples
Common ratios
1:1
4:3
16:9
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add aspect-ratio. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add aspect-ratioAPI Reference
Prop
Type
Accessibility
- The wrapper is purely presentational; accessibility depends on the content you place inside (e.g. give images meaningful
alttext).