Aspect ratio

Logos, portadas de informe y previews que no deben saltar al cargar.

Primitiva disponible para reservar el espacio de logos, portadas y previews. No tiene usos directos en la app actual.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/aspect-ratio.json

import

import { AspectRatio } from "@moodinary/ui/components/aspect-ratio";

Ejemplos

Proporciones

16 ∶ 9 para portadas, 1 ∶ 1 para logos y 4 ∶ 3 para previews.

16 ∶ 9 · portada de informe

4 ∶ 3

Código

ratios.tsx

import { AspectRatio } from "@moodinary/ui/components/aspect-ratio";
import { BRAND_ASSETS } from "@moodinary/ui/lib/brand-assets";

export default function AspectRatioExamples() {
	return (
		<>
			<AspectRatio className="w-[220px] max-w-full" ratio={16 / 9}>
				16 ∶ 9 · portada de informe
			</AspectRatio>
			<AspectRatio className="w-[110px]" ratio={1}>
				<img
					alt="Moodinary"
					className="!size-[70%]"
					height={64}
					src={BRAND_ASSETS.favicon}
					width={64}
				/>
			</AspectRatio>
			<AspectRatio className="w-[150px]" ratio={4 / 3}>
				4 ∶ 3
			</AspectRatio>
		</>
	);
}

Props

AspectRatio

Prop	Tipo	Default	Descripción
ratio	number	1	Ancho dividido alto.
children	ReactNode	-	Imagen o contenido.
className	string	-	Clases extra.

Cuándo sí y cuándo no

Hacé

Definí un ancho en el contenedor.
Usá object-contain para logos.
Escribí texto alternativo útil.

Evitá

No deformes imágenes.
No lo uses para texto largo.
No dejes imágenes sin tamaño reservado.

Las imágenes con contenido necesitan alt.
Las decorativas usan alt="".