Layout & grid

Aspect Ratio

Q: How do people describe a Aspect Ratio in plain words?

reserve the image hole before the file loads keep the video box locked to 16:9 stop the page from jumping when the picture finally shows up

Q: How do I implement a Aspect Ratio?

Kill layout shift from media: every img gets explicit width and height (or the container gets aspect-ratio with object-fit: cover). Video embeds sit in aspect-ratio: 16/9. Show a light-gray placeholder (or blurred LQIP) while loading. Target CLS under 0.1.

Reserve space at a fixed width-to-height ratio so media doesn’t shove the layout around when it loads.

Also known as ratio box · 16:9 placeholder · intrinsic ratio

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Aspect Ratio".

Kill layout shift from media: every img gets explicit width and height (or the container gets aspect-ratio with object-fit: cover). Video embeds sit in aspect-ratio: 16/9. Show a light-gray placeholder (or blurred LQIP) while loading. Target CLS under 0.1.

Anatomy:
- ratio: 16:9 video, 4:3 camera, 1:1 avatar, 3:4 product shots.
- object-fit: cover crops to fill; contain shows the whole image.
- placeholder: Light gray or blurred LQIP while the real asset loads.

Preferred API / pattern: `aspect-video / aspect-square utility classes`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: img without dimensions
○Avoid: aspect-ratio without object-fit
○Avoid: Still using padding-top percentage hacks
○Avoid: Avatars with contain

In plain wordsHow people search for it

“reserve the image hole before the file loads”“keep the video box locked to 16:9”“stop the page from jumping when the picture finally shows up”

AnatomyOpen for part names

ratio: 16:9 video, 4:3 camera, 1:1 avatar, 3:4 product shots.
object-fit: cover crops to fill; contain shows the whole image.
placeholder: Light gray or blurred LQIP while the real asset loads.

How to write itOpen for stack patterns

Web (HTML/CSS)aspect-ratio: 16 / 9

React + Tailwind + shadcn/uiaspect-video / aspect-square utility classes

SwiftUIaspectRatio(16/9, contentMode: .fit)

Ant DesignImage with width/height / CSS aspect-ratio on wrappers

Notes

Layout shift (CLS) loves images without reserved size. Fix it two ways: width/height attributes on <img> (browser derives the ratio) and/or aspect-ratio on the box. The old padding-top: 56.25% trick can retire. Without placeholders, masonry and card grids jump under the scroll position as each image arrives.

Common mistakesHumans and models trip here

img without dimensions: CLS spikes and Lighthouse calls you out.
aspect-ratio without object-fit: images stretch—pick cover or contain.
Still using padding-top percentage hacks: aspect-ratio support is green everywhere that matters.
Avatars with contain: non-square photos leave letterboxing—avatars almost always want cover.

More failure symptoms on AI broke it.

Related patterns

Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.AvatarA compact image or initials representing a person or entity.CardA contained surface grouping related content and actions as one unit.

Spotted a wrong name or missing pattern?

Message on X