---
type: reference
title: Tamaño y disposición
summary: Cómo los atributos width, height, overlay-width y overlay-height dimensionan el elemento caputchin-game en las disposiciones inline, modal y fullscreen.
---

Un `<caputchin-game>` puede renderizarse en tres disposiciones (se fijan con el atributo `layout`): `inline`, `modal` y `fullscreen`. Cómo lo dimensionas depende de la disposición, porque las disposiciones modal y fullscreen muestran **dos cajas separadas**:

- El **elemento en la página**: lo que se asienta en el flujo de tu página. En `inline` es el panel de juego entero; en `modal` / `fullscreen` es el pequeño checkbox que el visitante pulsa para abrir el juego.
- La **caja del juego**: el diálogo que se abre por encima en `modal` / `fullscreen`, con el juego dentro. (En `inline` no hay un diálogo aparte: el panel es el juego.)

Cuatro atributos dimensionan estas dos cajas. Cada valor es uno de `auto` (el predeterminado), `full` (abarca el espacio disponible), o un número positivo de píxeles como `480`.

| Atributo | Dimensiona | Aplica en |
|---|---|---|
| `width` / `height` | El elemento en la página | Todas las disposiciones |
| `overlay-width` / `overlay-height` | La caja del juego (diálogo + juego) | `modal`, `fullscreen` |

## Inline

Inline tiene una sola caja, así que `width` / `height` dimensionan el panel entero. `overlay-width` / `overlay-height` no hacen nada aquí y se ignoran (el widget registra una advertencia si los fijas).

```html
<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>
```

## Modal y fullscreen

Aquí las dos cajas son independientes. `width` / `height` dimensionan el **checkbox de entrada** en tu página; `overlay-width` / `overlay-height` dimensionan el **diálogo y el juego** que se abren cuando el visitante lo pulsa.

```html
<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>
```

`overlay-width="full"` hace que el juego llene el diálogo en ese eje; un valor en píxeles fija el juego a ese tamaño (un modal se ciñe a su alrededor). En `fullscreen` el diálogo ya cubre el viewport, así que `overlay-*` controla si el juego se estira para llenarlo o queda centrado a su propio tamaño.

## Cuando dejas la caja del juego sin fijar

Si no fijas `overlay-width` / `overlay-height`, la caja del juego usa el tamaño que el **autor del juego** eligió para el juego (su huella preferida, declarada en el `caputchin.json` del juego). Así que la mayoría de las veces solo necesitas `width` / `height` para la disposición de tu página, y el juego se dimensiona con sensatez. Fija `overlay-*` solo cuando quieras anular eso.

## Valores en píxeles

Un número a secas son píxeles CSS: `width="500"` y `width="500px"` son equivalentes. Los valores cero, negativos y no numéricos se rechazan (el atributo vuelve a su predeterminado y el widget registra una advertencia).

## Véase también

- [Elemento del widget de juego](/docs/getting-started/add-a-game): el conjunto completo de atributos de `<caputchin-game>`.
- [Métodos y eventos del widget](/docs/references/widget-methods-and-events): gobernar el widget y reaccionar a él.