React Aspect Ratio Examples — Video, Image, Portrait

The single most common AspectRatio use is a 16:9 container for an embedded video — YouTube, Vimeo, Loom, Wistia, or a self-hosted <video> element. Drivn's default ratio is "16/9", so you can omit the prop entirely for this case. Children fill the container with w-full h-full, and the overflow-hidden default keeps any slight oversizing clipped cleanly to the ratio box edge.

Drop this snippet into a marketing page, a course lesson, or a product landing hero. Because the ratio is locked at 16:9, the iframe never triggers cumulative layout shift when it loads — the space is reserved by CSS before any JavaScript runs. The aspect ratio docs cover the full prop list and API reference.

For a hero banner or landing-page image, pair AspectRatio with a single <img> styled w-full h-full object-cover. The object-cover rule ensures the image fills the ratio box and crops the overflow rather than distorting the pixels. Add rounded-lg or rounded-2xl on either the container or the child for rounded media cards that match your card component radius.

This pattern also works for responsive product images on e-commerce grids. Pair the 16/9 ratio with a max-width on the parent container and the image scales fluidly down to mobile without ever changing shape. The browser serves the right resolution through a srcset on the img tag if you configure one — nothing about AspectRatio is specific to srcset handling, so the usual HTML rules apply.

For a more advanced setup that layers a gradient and text overlay on top of the image, the container is already position: relative, so overlays anchor inside the ratio box without an extra wrapper div.

Square tiles are everywhere once you start looking: profile galleries, team pages, product thumbnails, album artwork, Instagram-style grids. Reach for the "1/1" string preset — one of the three built-ins next to "16/9" and "4/3" — and drop each tile into a Tailwind grid so the layout stays square at every breakpoint. Inside each box the image renders w-full h-full object-cover, so cropping stays uniform no matter how the source photos were exported.

When the square specifically holds a user's face, Drivn's dedicated Avatar component is the better fit — it bundles rounded fallbacks, image loading states, and fixed size presets. Keep AspectRatio for square media that is not a person: catalog thumbnails, blog card covers, collection tiles, cover art. At runtime the DOM is the same single div either way; the choice is about signalling intent to the next developer who reads the code, not about visual output.

Vertical video is now the default shape for short-form content — TikTok, Instagram Reels, YouTube Shorts, and Spotify Video all render at 9:16. AspectRatio handles this with a custom numeric ratio of 9 / 16, which resolves to 0.5625. You pass the division expression directly or the evaluated number, whichever reads better in the surrounding code.

Constrain the parent container to a maximum width around 320-400 pixels for a natural mobile-preview feel on desktop. Without the constraint, a 9:16 box becomes taller than most viewports and pushes subsequent page content far below the fold. The parent should also avoid overflow: hidden at the section level if you want the embedded player's fullscreen controls to escape the ratio box on user interaction.

For a gallery of reel clips, combine this ratio with a horizontal scroll container. The ScrollArea component gives you styled native scrollbars and snap-scrolling behavior without a third-party dependency.

Next.js's Image component gives you automatic srcset generation, blurhash placeholders, and lazy loading. Render it with the fill prop as a child of AspectRatio and the framework handles all the responsive sizing details. Set sizes to help Next.js pick the right resolution at each viewport width — a typical value for a hero image is "(max-width: 768px) 100vw, 50vw".

Because AspectRatio provides a container with explicit dimensions through the native aspect-ratio property, Image fill has a concrete box to fill. This pattern avoids the older trick of wrapping the image in a relative div with a padding-bottom hack; the ratio is enforced by CSS rather than by layout math. The rendered HTML stays minimal — two nested wrappers and the Next.js-generated <img> with its srcset.

See the Installation guide for how to set up next/image with Drivn, and the theming docs for how media cards in light and dark mode should tune their background placeholder colors before the image loads.