Display

AspectRatio

A box that holds a width to height ratio for a video, an embed or any child with no size of its own.

<script>
  import { AspectRatio } from "@codeatlasdev/ui";
</script>

<AspectRatio ratio={16 / 9}>
  <iframe title="Product tour" src="https://example.com/embed"></iframe>
</AspectRatio>

AspectRatio is the replacement for Radix AspectRatio: a width: 100% box whose height follows ratio (16 / 9, 4 / 3, 1). A direct img, video, iframe, canvas or svg child fills it (images and video are cropped with object-fit: cover); any other child is a normal block you size with height: 100%. The box clips, so a tall child never pushes it past the ratio.

For a plain picture you do not need it: <Image ratio={16 / 9}> crops the image to the ratio itself and keeps lazy loading and the no-layout-shift contract.

<script lang="ts">
  import { AspectRatio } from '@codeatlasdev/ui';
</script>

<div class="frame">
  <AspectRatio ratio={16 / 9}>
    <div class="slot">16 / 9: any child, one box</div>
  </AspectRatio>
</div>

<style>
  .frame { max-width: 28rem; border-radius: var(--ca-radius-md); overflow: hidden; }
  .slot {
    display: grid;
    place-items: center;
    height: 100%;
    background: var(--ca-surface-sunken);
    color: var(--ca-text-secondary);
    font-size: var(--ca-font-size-caption);
  }
</style>

It is layout only: no role, no label. Name the content inside it (an iframe needs a title).