---
type: reference
title: Taille et mise en page
summary: Comment les attributs width, height, overlay-width et overlay-height dimensionnent l'élément caputchin-game dans les mises en page inline, modal et fullscreen.
---

Un `<caputchin-game>` peut s'afficher selon trois mises en page (réglées avec l'attribut `layout`) : `inline`, `modal` et `fullscreen`. La façon de le dimensionner dépend de la mise en page, car les mises en page modal et fullscreen montrent **deux boîtes distinctes** :

- L'**élément dans la page** : la chose qui se place dans le flux de ta page. En `inline` c'est le panneau de jeu entier ; en `modal` / `fullscreen` c'est la petite case à cocher que le visiteur clique pour ouvrir le jeu.
- La **boîte du jeu** : la boîte de dialogue qui s'ouvre par-dessus en `modal` / `fullscreen`, avec le jeu dedans. (En `inline` il n'y a pas de boîte de dialogue séparée : le panneau est le jeu.)

Quatre attributs dimensionnent ces deux boîtes. Chaque valeur est l'une de `auto` (la valeur par défaut), `full` (couvre l'espace disponible), ou un nombre de pixels positif comme `480`.

| Attribut | Dimensionne | S'applique en |
|---|---|---|
| `width` / `height` | L'élément dans la page | Toutes les mises en page |
| `overlay-width` / `overlay-height` | La boîte du jeu (boîte de dialogue + jeu) | `modal`, `fullscreen` |

## Inline

Inline a une seule boîte, donc `width` / `height` dimensionnent le panneau entier. `overlay-width` / `overlay-height` n'ont aucun effet ici et sont ignorés (le widget affiche un avertissement si tu les règles).

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

Ici les deux boîtes sont indépendantes. `width` / `height` dimensionnent la **case à cocher d'entrée** sur ta page ; `overlay-width` / `overlay-height` dimensionnent la **boîte de dialogue et le jeu** qui s'ouvrent quand le visiteur la clique.

```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"` fait remplir la boîte de dialogue par le jeu sur cet axe ; une valeur en pixels fixe le jeu à cette taille (un modal s'ajuste étroitement autour de lui). En `fullscreen` la boîte de dialogue couvre déjà le viewport, donc `overlay-*` contrôle si le jeu s'étire pour le remplir ou reste centré à sa propre taille.

## Quand tu laisses la boîte du jeu non réglée

Si tu ne règles pas `overlay-width` / `overlay-height`, la boîte du jeu utilise la taille que l'**auteur du jeu** a choisie pour le jeu (son empreinte préférée, déclarée dans le `caputchin.json` du jeu). Donc la plupart du temps tu n'as besoin que de `width` / `height` pour la mise en page de ta page, et le jeu se dimensionne de façon sensée. Ne règle `overlay-*` que lorsque tu veux passer outre.

## Valeurs en pixels

Un simple nombre, ce sont des pixels CSS : `width="500"` et `width="500px"` sont équivalents. Les valeurs zéro, négatives et non numériques sont rejetées (l'attribut revient à sa valeur par défaut et le widget affiche un avertissement).

## Voir aussi

- [Élément du widget de jeu](/docs/getting-started/add-a-game) : l'ensemble complet des attributs de `<caputchin-game>`.
- [Méthodes et événements du widget](/docs/references/widget-methods-and-events) : piloter le widget et y réagir.