AspectRatio

A box that keeps a fixed width-to-height ratio as it resizes, for video embeds, maps, cover images and thumbnails; direct img, video and iframe children fill it.

PreviewOpen ↗

Code

import { AspectRatio } from "@fadymondy/nasaq/web";export function Intro() {  return (    <AspectRatio ratio={16 / 9} className="rounded-card border border-border">      <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Product tour" allowFullScreen />    </AspectRatio>  );}

Layout · beta

Live examples and controls: AspectRatio in the lab.

Install

npx shadcn@latest add https://docs.nasaqui.com/r/aspect-ratio.json

A div with CSS aspect-ratio. It reserves the height before media loads, so the page does not jump.

When to use

Video and map embeds, cover images, thumbnails in a grid.

When not to use

Images with known width and height attributes: the browser already reserves their space.
Text content: let it set its own height.

Import

import { AspectRatio } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick start

import { AspectRatio } from "@fadymondy/nasaq/web";

export function Intro() {
  return (
    <AspectRatio ratio={16 / 9} className="rounded-card border border-border">
      <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Product tour" allowFullScreen />
    </AspectRatio>
  );
}

Anatomy

AspectRatio                     data-slot="aspect-ratio", style="aspect-ratio: <ratio>"
└─ img | video | iframe         absolutely fills the box (img and video use object-cover)

Other children flow normally inside the box.