Blips
Documentação

Aspect Ratio

Exibe conteúdo dentro de uma proporção desejada.

Carregando…
import { AspectRatio } from "@blips/ui/components/aspect-ratio";
import Image from "next/image";

export default function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
      <Image
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        fill
        className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
      />
    </AspectRatio>
  );
}

Instalação

pnpm add @blips/ui

Uso

import { AspectRatio } from "@blips/ui/components/aspect-ratio"
<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Imagem" className="rounded-md object-cover" />
</AspectRatio>

Exemplos

Exemplo

Exibe uma imagem mantendo a proporção 16 / 9 dentro de um contêiner responsivo.

Carregando…
import { AspectRatio } from "@blips/ui/components/aspect-ratio";
import Image from "next/image";

export default function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
      <Image
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        fill
        className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
      />
    </AspectRatio>
  );
}

Referência da API

AspectRatio

O componente AspectRatio exibe conteúdo dentro de uma proporção desejada.

PropTipoPadrãoObrigatório
rationumber-Sim
classNamestring-Não

Para mais informações, consulte a documentação do Radix UI.

AnteriorAlert DialogPróximoAvatar