Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Aspect Ratio examples · Standard

4:3 Aspect Ratio (Traditional) for React

A 4:3 traditional frame for classic video, presentations, and legacy media formats.

Framework
UI library

Before widescreen took over, 4:3 ruled everything. This example sets ratio to 4 / 3 on AspectRatio, the proportions of standard-definition television, and the frame reserves its height before the content loads. The width comes from the parent, capped here with max-w-md, and the height follows the ratio. Use it for classic video, older slide decks, tablet screenshots, and phone photos.

Preview

Preview width
4:3

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is 4:3 set on this frame?

ratio is 4 / 3 on AspectRatio, width divided by height. The frame is four wide for every three of height. The centered label reads "4:3".

Where does the frame's width come from?

The parent is w-full max-w-md. The height follows that width. Give the wrapper a width, because a ratio with no width can collapse. max-w-md caps the width, and the height follows 4 / 3.

How does the label fill the frame?

The child is a div with size-full, flex items-center justify-center, rounded-md, and bg-muted. The span is text-sm text-muted-foreground. Those classes are on the child, so the frame's shape stays on ratio.

How does ratio become a height?

The ratio is stored in the --ratio custom property, and the aspect-ratio utility reads that variable.

How do I put an image or a video in this frame?

Put one child in AspectRatio and make it fill the box. The Aspect Ratio usage places the image absolutely, inset on every side, at full size, with object-cover. This file's child is the muted "4:3" label.

What happens if I omit ratio?

The default is 1, a square. This file sets 4 / 3 so the frame is that shape, wider than a square and taller than 16:9 at the same width.

All 7 aspect ratio examples