Aspect Ratio

Mantén una caja en una proporción fija para imágenes, video y embeds.

1import { AspectRatio } from '@/components/ui/aspect-ratio';
2
3export function Default() {
4  return (
5    <div className="w-full max-w-md">
6      <AspectRatio ratio={16 / 9} className="rounded-xl">
7        <img src="https://picsum.photos/seed/aspect/960/540" alt="Office at golden hour" />
8      </AspectRatio>
9    </div>
10  );
11}

Instalación

pnpm dlx nachui add aspect-ratio

Anatomía

1import { AspectRatio } from '@/components/ui/aspect-ratio';

1<AspectRatio ratio={16 / 9} className="rounded-lg">
2  <img src="/cover.jpg" alt="Portada" />
3</AspectRatio>

La caja ocupa todo el ancho del padre y saca su altura de ratio mediante la propiedad CSS aspect-ratio, así que nada salta mientras carga el medio. Un hijo directo img o video llena la caja con object-cover, y un iframe se estira para cubrirla.

Ejemplos

Predeterminado (Default)

1import { AspectRatio } from '@/components/ui/aspect-ratio';
2
3export function Default() {
4  return (
5    <div className="w-full max-w-md">
6      <AspectRatio ratio={16 / 9} className="rounded-xl">
7        <img src="https://picsum.photos/seed/aspect/960/540" alt="Office at golden hour" />
8      </AspectRatio>
9    </div>
10  );
11}

Proporciones

Cualquier número funciona: 1, 4 / 3, 3 / 4, 21 / 9.

1 / 1

4 / 3

3 / 4

21 / 9

1import { AspectRatio } from '@/components/ui/aspect-ratio';
2
3const ratios = [
4  { label: '1 / 1', value: 1 },
5  { label: '4 / 3', value: 4 / 3 },
6  { label: '3 / 4', value: 3 / 4 },
7  { label: '21 / 9', value: 21 / 9 },
8];
9
10export function Ratios() {
11  return (
12    <div className="grid w-full max-w-md grid-cols-2 gap-4">
13      {ratios.map((ratio) => (
14        <div key={ratio.label} className="flex flex-col gap-1.5">
15          <AspectRatio
16            ratio={ratio.value}
17            className="border-border bg-hatch text-muted-foreground flex items-center justify-center rounded-lg border"
18          >
19            <span className="font-mono text-xs">{ratio.label}</span>
20          </AspectRatio>
21        </div>
22      ))}
23    </div>
24  );
25}

Referencia de API

AspectRatio

Prop	Tipo	Por defecto	Descripción
`ratio`	`number`	`16 / 9`	Ancho dividido por alto
`as`	`React.ElementType`	`'div'`	Elemento a renderizar
`className`	`string`	-	Clases CSS adicionales, el redondeo va aquí

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorContainer

SiguienteCenter