Skip to Content
ComponentsAtomsAspect Ratio

Aspect Ratio

Atom

Aspect Ratio mantém a proporção de uma superfície sem depender do tamanho final da viewport.

Use para imagens, mapas, vídeos, thumbnails e previews que precisam ocupar largura fluida sem quebrar ritmo visual. A proporção é contrato de layout: não use para esconder conteúdo que precisa determinar a própria altura.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoAspectRatioProps = {
  ratio?: number
  label: string
  children: React.ReactNode
}
 
export function PulsoAspectRatio({ ratio = 16 / 9, label, children }: PulsoAspectRatioProps) {
  return (
    <figure className="space-y-2">
      <div
        aria-label={label}
        className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--muted)]"
        style={{ aspectRatio: ratio }}
      >
        {children}
      </div>
      <figcaption className="text-sm text-[var(--fg-muted)]">{label}</figcaption>
    </figure>
  )
}
<PulsoAspectRatio label="Mapa de menções por região" ratio={4 / 3}>
  <div className="grid h-full place-items-center text-[var(--fg-muted)]">
    Preview do mapa
  </div>
</PulsoAspectRatio>

Regras

  • Use proporções explícitas: 1 / 1, 4 / 3, 16 / 9.
  • Não fixe altura e proporção ao mesmo tempo sem motivo.
  • Preserve legenda ou contexto quando a mídia informa decisão.
  • Não use para conteúdo textual longo; texto deve definir sua própria altura.
Last updated on
Alert DialogAvatar