---
type: reference
title: Tamanho e disposição
summary: Como os atributos width, height, overlay-width e overlay-height dimensionam o elemento caputchin-game nas disposições inline, modal e fullscreen.
---

Um `<caputchin-game>` pode ser renderizado em três disposições (definidas com o atributo `layout`): `inline`, `modal` e `fullscreen`. Como você o dimensiona depende da disposição, porque as disposições modal e fullscreen mostram **duas caixas separadas**:

- O **elemento na página**: a coisa que fica no fluxo da sua página. Em `inline` é o painel de jogo inteiro; em `modal` / `fullscreen` é o pequeno checkbox que o visitante clica para abrir o jogo.
- A **caixa do jogo**: o diálogo que abre por cima em `modal` / `fullscreen`, com o jogo dentro. (Em `inline` não há um diálogo separado: o painel é o jogo.)

Quatro atributos dimensionam essas duas caixas. Cada valor é um de `auto` (o padrão), `full` (abrange o espaço disponível), ou um número positivo de pixels como `480`.

| Atributo | Dimensiona | Aplica em |
|---|---|---|
| `width` / `height` | O elemento na página | Todas as disposições |
| `overlay-width` / `overlay-height` | A caixa do jogo (diálogo + jogo) | `modal`, `fullscreen` |

## Inline

Inline tem uma única caixa, então `width` / `height` dimensionam o painel inteiro. `overlay-width` / `overlay-height` não fazem nada aqui e são ignorados (o widget registra um aviso se você os definir).

```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 e fullscreen

Aqui as duas caixas são independentes. `width` / `height` dimensionam o **checkbox de entrada** na sua página; `overlay-width` / `overlay-height` dimensionam o **diálogo e o jogo** que abrem quando o visitante o clica.

```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"` faz o jogo preencher o diálogo nesse eixo; um valor em pixels fixa o jogo nesse tamanho (um modal se ajusta ao redor dele). Em `fullscreen` o diálogo já cobre o viewport, então `overlay-*` controla se o jogo se estica para preenchê-lo ou fica centralizado no seu próprio tamanho.

## Quando você deixa a caixa do jogo sem definir

Se você não definir `overlay-width` / `overlay-height`, a caixa do jogo usa o tamanho que o **autor do jogo** escolheu para o jogo (a sua presença preferida, declarada no `caputchin.json` do jogo). Então, na maioria das vezes você só precisa de `width` / `height` para a disposição da sua página, e o jogo se dimensiona de forma sensata. Defina `overlay-*` apenas quando quiser sobrepor isso.

## Valores em pixels

Um número simples são pixels CSS: `width="500"` e `width="500px"` são equivalentes. Valores zero, negativos e não numéricos são rejeitados (o atributo volta ao seu padrão e o widget registra um aviso).

## Veja também

- [Elemento do widget de jogo](/docs/getting-started/add-a-game): o conjunto completo de atributos de `<caputchin-game>`.
- [Métodos e eventos do widget](/docs/references/widget-methods-and-events): conduzir o widget e reagir a ele.