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 aspect ratios show up in profile galleries, team pages, and Instagram-style grids. Use the "1/1" string preset — one of the three built-in values alongside "16/9" and "4/3" — and combine it with a Tailwind grid for a responsive gallery that stays square on every breakpoint. Each tile renders its child image with w-full h-full object-cover so cropping stays consistent across the grid.

For user avatars specifically, Drivn's dedicated Avatar component is the stronger choice — it ships rounded fallbacks, image loading states, and consistent sizing presets. AspectRatio is the right tool when you need a square media tile that is not a user avatar: product thumbnails, blog card covers, collection tiles, or album artwork. The rendered DOM is identical at runtime; the API choice is about intent, not 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.