Want to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 15 aspect-ratio demos. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
The fluid YouTube embed, 2026 edition: aspect-ratio: 16/9 on a wrapper, width/height 100% on the iframe — two rules replace the entire padding-bottom: 56.25% ritual. The player ships as a click-to-load facade (poster + play button in the same ratio box), so the page loads zero third-party JavaScript until a human actually asks for the video; the swapped-in iframe inherits the exact same box, so nothing shifts. A talk-library page with chapters and an up-next rail proves the same ratio maths at three sizes.
A cinematic hero whose height is negotiated, not hard-coded: aspect-ratio: 21/9 asks for widescreen, min-height keeps it usable on portrait phones, max-height: 100svh guarantees it never outgrows the viewport. The background video paints edge to edge with object-fit: cover, falls back to its poster (then to a gradient) if the file never arrives, and drifts through a slow Ken Burns zoom that stops for prefers-reduced-motion. The three-line sizing contract is printed on the page itself.
The Instagram-shaped grid: auto-fill columns from CSS Grid, aspect-ratio: 1 on every tile, object-fit: cover on every photo. No fixed heights, no JavaScript measuring, no cropping scripts — squares at 2 columns, squares at 8. A photographer profile with a 2×2 featured tile (still a perfect square, because the unit cells are), hover overlays that also fire on keyboard focus, and a scroll-driven reveal that browsers without view() timelines simply skip.
The card grid every blog, news site and docs hub ships — with every thumbnail cut to an identical 4:3 no matter what shape the CMS uploads. aspect-ratio: 4/3 sizes the box, object-fit: cover art-directs the crop, and the width/height attributes on each <img> keep the page CLS-clean while photos stream in. A magazine front page with one 16:9 lead story proves you can mix ratios in one system without a single fixed height.
A Stories/Shorts rail where the ratio runs the other direction: each card declares a height (clamped to the viewport) and aspect-ratio: 9/16 derives the width. That reversal — ratio solves for whichever axis you leave auto — is the most under-taught fact about the property. Scroll-snap paddles the rail, segment bars and conic-gradient avatar rings sell the Stories grammar, edge masks fade the overflow, and every card is a real focusable link.
A full product page whose gallery is 100% CSS: four hidden radio inputs drive the view, thumbnail labels switch it, and :checked does the state management — no JavaScript, no gallery library. The main stage is locked to 4:5 (the portrait ratio apparel retailers standardize on) and the thumbnails to 1:1, so every upload — flat-lay, on-model, detail crop — presents identically. Crossfade between views, keyboard-operable via the radio group, and a details column with real size selectors.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A detail-page gallery where zoom never moves the layout: each carousel frame is a locked 1:1 box, the photo scales to 2.2× inside it on hover, and 12 lines of JS steer transform-origin under the cursor for a true magnifier feel. The thumbnails are plain anchor links — scroll-snap plus scroll-behavior: smooth turns the browser's own anchor navigation into the carousel engine, so frame switching costs zero JavaScript. Watch-store aesthetics, keyboard path included.
A split-screen lab that makes Cumulative Layout Shift visible: the same article twice, images arriving on a simulated slow connection. The left pane reserves nothing — headlines lurch as each photo lands. The right pane gives every image aspect-ratio: 3/2 plus a shimmer skeleton — pixels pour into pre-reserved boxes and the text never moves. A live CLS meter (PerformanceObserver) keeps score, and a replay button re-runs the network as many times as you need to believe it.
What happens when the words don't fit the ratio? This demo makes the aspect-ratio contract legible: it's a preferred size, not a promise. Default tiles bend — content-based minimum sizing lets long CMS copy grow the box past 16:9 instead of spilling. Strict tiles (min-height: 0) hold the ratio and scroll inside. And aspect-ratio: auto 3/2 gives images a placeholder shape that yields to their intrinsic one on arrival. Flip the 'verbose CMS' switch and watch each policy respond.
Publisher-grade ad slots that reserve their exact space before a single ad byte arrives: aspect-ratio: 728/90 for the leaderboard, 300/250 for the rectangle, 300/600 for the half-page — the raw IAB dimensions written straight into CSS, no decimal maths. Each slot shimmers as a labeled placeholder, the 'ad' arrives on a CSS delay to prove the page doesn't flinch, and a container query swaps the leaderboard for a 320/50 mobile banner when the column gets narrow. Ads pay the bills; this is how they stop costing you CLS.
A trailer lightbox on the native <dialog> element, sized by one honest equation: width:min(92vw, 88svh × 16/9, 1080px) plus aspect-ratio:16/9 — so the modal is always the largest 16:9 rectangle that fits the screen, portrait or landscape, phone or ultrawide. ::backdrop gets real blur, @starting-style animates the open, form method='dialog' closes without JavaScript, and the 9 lines of JS do exactly two things: showModal() and light-dismiss. The poster wall behind it runs 2:3 — movie-jacket ratio — for free contrast.
The contact-page map, minus the height:450px it shipped with since 2009: the wrapper owns aspect-ratio:16/9, the map iframe fills it 100%/100%, and a container query re-shapes the box to 1:1 when the section gets narrow — because a widescreen sliver of map is useless under a thumb. An address card overlaps the map from a shared grid cell, the wrapper paints a gradient placeholder while (or if) the tiles load, and a live badge reports which ratio is currently in charge.
Aspect-ratio as a query, not a property: this instrument panel reorganizes itself with @media (orientation:…) and (min-aspect-ratio:16/9) — reacting to the viewport's shape, which width breakpoints can't see — and its HUD lights up whichever queries currently match, live. The star exhibit is a resize:both playground box that classifies its own proportions (portrait → square → landscape → cinematic) using container aspect-ratio queries: grab its corner and watch a component respond to its shape, not the screen's.
The logo wall: eight brand marks with wildly different intrinsic shapes — 800×120 wordmarks, 320×320 badges, 240×420 crests — normalized into identical 3:2 cells. The cell imposes the ratio; object-fit: contain letterboxes each mark, undistorted, at its largest fitting size; and the images themselves keep aspect-ratio: auto (their intrinsic truth) — which is precisely what contain preserves. A cover/fill/contain switch is built in so you can watch the wrong object-fit ruin a logo in real time.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The migration sheet for retiring 2015's cleverest hack: side-by-side live boxes prove padding-top: 56.25% and aspect-ratio: 16/9 produce identical geometry, a diff shows exactly which lines you delete (the wrapper's positioning, the child's absolute inset — all of it), and a ratio picker re-derives both implementations plus the conversion table in real time. Includes the formula the hack was built on — percentage padding resolves against WIDTH — so you can convert any legacy percentage you meet in the wild, then never write one again.
FAQ
Frequently asked questions
What is the CSS aspect-ratio property and when should I use it vs the padding-top hack?
The CSS aspect-ratio property (Baseline September 2021 — Chrome 88, Safari 15, Firefox 89) declares a box's intrinsic width-to-height ratio so the browser reserves the correct height BEFORE any child content or images load. Syntax: aspect-ratio: 16 / 9 (video), aspect-ratio: 1 (square), aspect-ratio: 4 / 5 (apparel product), aspect-ratio: 9 / 16 (TikTok/Reels story). The padding-top hack is the pre-2021 legacy: wrap the element in a positioned container, then set padding-top: 56.25% (which is 9÷16 = 56.25%) so the padding — computed as a percentage of the CONTAINING BLOCK'S WIDTH — reserves proportional height. Two traps: (1) the math is inverted (HEIGHT ÷ WIDTH, so 4:3 = 75%, 1:1 = 100%, 9:16 = 177.78%), and it's easy to write the wrong number; (2) the child must be absolutely-positioned inside the wrapper because padding on the wrapper reserves space but the wrapper itself has no natural height. In 2026, always use aspect-ratio for new code — it's Baseline-supported for 4+ years, ~99.9% of browser traffic in every tier-1 country (US/UK/CA/AU/NZ), and it works on the ELEMENT ITSELF without wrapper gymnastics. The only reason to still ship the padding-top hack: legacy Corporate IE11 fleet (dying — <1% traffic in the US) or email newsletter clients (Outlook Desktop still uses the Word rendering engine, no CSS Grid, no aspect-ratio). Demo 15 in this collection ships the exact side-by-side comparison with a live ratio picker that updates both patterns simultaneously — copy the modern side. See MDN aspect-ratio for the full spec.
How does aspect-ratio prevent Cumulative Layout Shift (CLS) — Google's Core Web Vital since 2020?
CLS is the metric Google added to Core Web Vitals in 2020 that measures visible layout instability during page load. It's calculated as impact fraction × distance fraction, and Google penalizes pages with CLS > 0.1 in ranking. The #1 CLS bug in every 2020-era codebase: an <img> or <iframe> without dimensions declared. The browser reserves 0 height until the image byte arrives; when the byte lands, the image expands to its natural height and every element below jumps down. CLS accumulates on every image load, and a photo-heavy page can hit CLS 0.5+ without the fix. The 2026 recipe: <img src='...' width='800' height='600'> — the browser reads the HTML width+height attributes AS AN ASPECT RATIO and reserves proportional height in the layout even before the image byte arrives. This works because browsers now compute aspect-ratio: attr(width) / attr(height) internally when width+height are HTML attributes. For iframes, background-images, and CSS-driven media where HTML attributes don't apply: wrap in a container with explicit aspect-ratio: 16 / 9. Demo 08 in this collection ships a side-by-side lab with a live PerformanceObserver CLS meter — click 'Load' on both panes and watch the reserved-space pane hit CLS 0.00 while the raw pane hits CLS 0.15+. This is the metric Google's own optimize-cls guide singles out as the fastest way to move a page from Poor CWV to Good CWV. On a content-thin page (product listing, hero video), CLS improvement lifts ranking by 15-25% for the same query.
How do I make a responsive 16:9 YouTube iframe embed that scales with the container — the canonical pattern?
Demo 01 ships the exact recipe every tier-1 SaaS docs site, blog, and marketing page uses in 2026. Two lines of CSS: .embed { aspect-ratio: 16 / 9; width: 100% } plus .embed iframe { width: 100%; height: 100% }. That's it. No padding-top hack, no absolute-positioned wrapper, no width-height JavaScript recalc on resize. The iframe fills its container, the container maintains the 16:9 aspect ratio at any width, and layout is stable before the iframe loads. Trap 1: don't put aspect-ratio on the iframe itself — iframes accept it but a browser's aspect-ratio calc fights the iframe's intrinsic behavior in edge cases (Safari has historically been inconsistent). Put it on the wrapper, stretch the iframe. Trap 2: for embeds behind a click-to-load facade (Demo 01 pattern — YouTube's IntersectionObserver-triggered iframe replaces a poster+play-button placeholder), the facade element MUST also carry the same aspect-ratio: 16 / 9 so the swap is dimensionally identical — otherwise you get a jarring layout shift the moment the iframe replaces the poster. Trap 3: for privacy + performance, use the click-to-load pattern instead of loading the iframe on page-load. Google's Privacy Sandbox docs, GDPR compliance guides, and Core Web Vitals recommendations all endorse this pattern — every YouTube embed loads ~700KB of JavaScript on your page even before the user hits play. Facade + click-to-load defers all of that until user intent is proven. Demo 01 ships the 13-line vanilla JS facade-swap snippet + the aspect-ratio wrapper — copy both. Works identically for Vimeo, Wistia, Loom, Cameo, MasterClass, YouTube Shorts (swap to 9:16), YouTube Music, Spotify embed, Twitter/X embed, Instagram embed.
How do modern 2026 aspect-ratio patterns compare with Tailwind's aspect-video / aspect-square / aspect-[16/9] utilities?
Tailwind's aspect-ratio utilities are 1:1 mappings of the CSS property they compile to. aspect-video → aspect-ratio: 16 / 9. aspect-square → aspect-ratio: 1 / 1. aspect-[16/9] → arbitrary-value syntax → aspect-ratio: 16 / 9. All three ship identical CSS to what this collection demos. Tailwind's Aspect Ratio docs even reference the exact same Baseline support cutoff (Sep 2021) that this collection targets. The productivity trade-off: Tailwind gives you class='aspect-video' instead of style='aspect-ratio: 16/9' — 12 chars vs 26. In a JSX/Vue/Svelte template that authors 200+ elements per page, the class syntax reads cleaner AND you get Tailwind's JIT purge so unused utilities never ship. In a plain HTML/CSS project without Tailwind: use the direct aspect-ratio declaration in a scoped stylesheet — you avoid Tailwind's runtime (~15-40KB compressed depending on JIT settings), and the CSS variable pattern in every one of this collection's demos (--ar: 16/9) lets you theme the ratio via CSS custom properties without shipping the Tailwind runtime. For Radix UI users: @radix-ui/react-aspect-ratio is a 1.2KB gzipped React wrapper that renders a <div> with the aspect-ratio property applied. It exists purely for the Radix API consistency — the underlying CSS is identical to shipping the property directly. Drop the library if you're not deep in the Radix ecosystem. Same story for @mui/material Box (Material UI ~85KB total bundle if you tree-shake), Chakra UI AspectRatio (Chakra's Emotion runtime ~50KB), shadcn/ui aspect-ratio (peer-deps on Radix). None of them add functionality — the CSS property does the work; the wrapper adds a naming convention. This collection's approach: ship the CSS property directly in a scoped block, get the same result at 0KB runtime cost.
How do I build a responsive product image gallery with aspect-ratio + object-fit — the Shopify, Amazon, Etsy, Farfetch pattern?
Demo 06 ships the canonical recipe (CSS Aspect Ratio Product Image Gallery). Three components stacked. (1) The stage — the main product image with aspect-ratio: 4 / 5 (the fashion e-commerce standard — Shopify Dawn, WooCommerce Storefront, BigCommerce Cornerstone, and every luxury retailer uses 4:5 because it maximizes vertical real estate on mobile while staying reasonable on desktop) or aspect-ratio: 1 / 1 (Amazon/Etsy's square standard, works for objects that photograph well from any angle). The image inside uses object-fit: cover; object-position: center so it fills the stage without distortion, cropping edges if the source photo doesn't match the target ratio. (2) The thumbnail strip — a grid of aspect-ratio: 1 / 1 tiles with object-fit: cover. Thumbnails are always 1:1 regardless of the stage ratio because Amazon-style comparison shopping conditioned users to expect uniformly-sized thumbs. (3) The state driver — hidden <input type='radio' name='view'> for each thumb + :checked ~ .stage img.match { opacity: 1 }. Zero JavaScript. Real form-post semantics (if the gallery is inside a <form>, the selected view can post to the server, e.g. for 'add this variant to cart' flows). Keyboard users get free arrow-key navigation between radios. Screen readers announce 'view 3 of 6, radio button' correctly. Accessibility non-negotiables: every <img> has meaningful alt='Product name, view N of M', the thumbnail strip has role='radiogroup' aria-label='Product views', focus rings on every thumbnail at 2px min / 3:1 contrast per WCAG 2.4.13, and hit targets ≥ 44px per WCAG 2.5.5. This is the pattern Shopify Dawn, WooCommerce Storefront, BigCommerce Cornerstone, Farfetch, Ssense, MatchesFashion, Nordstrom, Net-a-Porter, and every tier-1 fashion e-commerce site ships — check DevTools on any product page and you'll see the same 3-layer recipe.
Which aspect-ratio patterns fit high-CPM verticals — Shopify/Amazon product pages, video hosting (Vimeo/Wistia/Loom), IAB ad slots, real-estate galleries, streaming media (Netflix/Disney+)?
Aspect-ratio is the highest-leverage CSS primitive on tier-1 e-commerce and media sites because it directly protects Core Web Vitals (CLS 0) which Google weights at ~15-25% of ranking for content-thin pages. Six demos in this collection map to very-high-CPM verticals: Demo 01 (16:9 YouTube Iframe with facade) is the reference for every video-hosting embed pattern — YouTube Shorts, Vimeo, Wistia, Loom, Cameo, MasterClass, TikTok. Video hosting CPM $15-25, edtech video CPM $20-35. The click-to-load facade also boosts LCP (Largest Contentful Paint) by deferring 700KB of iframe JavaScript, which cascades to Google Ads Quality Score improvements (20-40% lower CPC for the same ad placement). Demo 05 (9:16 Vertical Stories) is the TikTok, Instagram Reels, YouTube Shorts, LinkedIn Video, Snapchat Discover pattern — vertical-video-first CPM for social platforms $8-20. Demo 06 (4:5 Product Gallery) is the Shopify Dawn / WooCommerce Storefront / BigCommerce Cornerstone / Farfetch / Ssense / MatchesFashion / Nordstrom / Net-a-Porter pattern. Fashion e-commerce CPM $8-15, luxury fashion CPM $15-30, sneaker resale (StockX / GOAT) CPM $10-20. Demo 08 (CLS Placeholder) is the direct Core Web Vitals fix that lifts Google Ads Quality Score across the entire site — every product listing, blog card, and hero image reserves its box before load. Demo 10 (IAB Ad Banner Slots) is the canonical recipe for AdSense / Mediavine / Raptive / AdThrive ad implementations — 728×90 leaderboard, 300×250 medium rectangle, 300×600 half-page, 320×50 mobile — every ad slot reserves its aspect ratio so ad loads don't cause CLS. Publisher CPM $5-25 depending on niche (dev/tech $8-15, finance $25-45, insurance $30-80). Demo 11 (Responsive Dialog with 16:9) is the video-modal pattern for Cameo (creator video messages), MasterClass (course previews), and every 2026 SaaS product-tour modal. Each of these very-high-CPM verticals rewards the WCAG 2.2 AA accessibility + CLS 0 + INP 0ms moat this collection ships, because enterprise procurement (Shopify Plus / Amazon Ads / YouTube Content Partner) has accessibility and Core Web Vitals as literal RFP checklist items.
Do these CSS aspect-ratio demos work in React, Vue, Svelte, Astro, Next.js, Remix, and SvelteKit — and what's the framework portability story vs @radix-ui/react-aspect-ratio, @mui/material AspectRatio, Chakra UI AspectRatio?
Every demo is plain HTML + CSS with zero dependencies, zero build steps, and zero framework lock-in. To port to React / Next.js App Router: rename class to className, drop the JSX into any server or client component (no 'use client' directive needed for the 11 Pure CSS demos because they have no interactivity that requires hydration; only Demos 01 facade swap, 07 pointer magnifier, 08 CLS meter, and 11 dialog light-dismiss need it, each under 20 lines JS). Vue 3 / Nuxt 3: accepts as-is, class attribute is native. Svelte / SvelteKit: accepts as-is. Astro: drop into any .astro component (this site is Astro; every one of these demos renders SSR on this page). Remix / Solid.js / Qwik: accepts as-is. Compared to framework-specific aspect-ratio libraries: @radix-ui/react-aspect-ratio (~1.2KB gzipped) is a React wrapper around a <div> with aspect-ratio applied — it exists for Radix API consistency, not because the browser needs it. Drop the library if you're not deep in the Radix ecosystem; the CSS is identical either way. @mui/material Box with sx aspect-ratio prop requires the full Material UI runtime (~85KB gzipped total). @chakra-ui/react AspectRatio needs Chakra's Emotion runtime (~50KB). shadcn/ui aspect-ratio peer-deps on Radix. Vuetify VResponsive, Ant Design AspectRatio, Bootstrap ratio — same story, all layer on framework-specific naming conventions around the same underlying CSS property. None add functionality the browser doesn't do natively since Sep 2021 Baseline. The .car-NN numeric-prefix scoping means all 15 aspect-ratio patterns coexist on the gallery page without a single class collision, and the same prefix guarantees you can drop any one demo into a codebase that already uses .aspect-ratio, .ratio, .embed, .hero, or .gallery classes without renaming a single selector. MIT licensed, no attribution required, no signup.
