Relación de aspecto

La altura se deduce del ancho antes de que se haya cargado nada, así que una imagen o un incrustado que llega tarde no empuja hacia abajo el resto de la página. El hijo rellena la caja y se recorta en lugar de dejar franjas.

Relación de aspecto básica

aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2)' },
  '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 2rem">',
)

Relaciones habituales

16 / 9

4 / 3

1 / 1

3 / 4

grid({ min: '9rem' },
  ...['16 / 9', '4 / 3', '1 / 1', '3 / 4'].map((ratio) =>
    stack({ gap: 'xs' },
      aspectRatio({ ratio, style: 'background: var(--su-surface-2); border-radius: 0.5rem' },
        '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 1rem">'),
      text({ variant: 'caption', tone: 'muted', align: 'center' }, ratio),
    ),
  ),
)

Incrustados

La razón de ser de este componente: un <iframe> no tiene tamaño intrínseco, así que sin una relación se colapsa o necesita una altura fija a mano.

aquí iría un <iframe>

aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  '<div style="display: grid; place-items: center; color: var(--su-text-subtle)">aquí iría un &lt;iframe&gt;</div>',
)

En una tarjeta

cardMedia() ya hace esto en la parte superior de una tarjeta. Recurre a aspectRatio() cuando la caja esté en otro sitio.

cardMedia — de serie

aspectRatio — en cualquier otro sitio

grid({ min: '12rem' },
  card(
    cardMedia({ src: '/logo.svg', alt: '', style: 'background: var(--su-surface-2); object-fit: contain; padding: 1rem' }),
    cardBody(text({ variant: 'small' }, 'cardMedia — de serie')),
  ),
  card(
    cardBody(
      stack({ gap: 'sm' },
        aspectRatio({ ratio: '1 / 1', style: 'background: var(--su-surface-2); border-radius: 0.5rem' },
          '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 1rem">'),
        text({ variant: 'small' }, 'aspectRatio — en cualquier otro sitio'),
      ),
    ),
  ),
)

Recorte

El hijo se estira para rellenar y se recorta con object-fit: cover. Para algo que no debe recortarse — un logotipo, un diagrama — pon object-fit: contain en el hijo, como hacen todas las demos de esta página.

Props

Prop	Tipo	Por defecto	Descripción
`ratio`	`string`	`'16 / 9'`	Cualquier valor CSS de aspect-ratio.
`as`	`string`	`'div'`	Elemento que se renderiza.