---
type: reference
title: Größe und Layout
summary: Wie die Attribute width, height, overlay-width und overlay-height das caputchin-game-Element über die Layouts inline, modal und fullscreen dimensionieren.
---

Ein `<caputchin-game>` kann in drei Layouts gerendert werden (mit dem `layout`-Attribut gesetzt): `inline`, `modal` und `fullscreen`. Wie du es dimensionierst, hängt vom Layout ab, denn die Layouts modal und fullscreen zeigen **zwei getrennte Boxen**:

- Das **Element in der Seite**: das Ding, das im Fluss deiner Seite sitzt. In `inline` ist das das ganze Spielpanel; in `modal` / `fullscreen` ist es die kleine Checkbox, die der Besucher klickt, um das Spiel zu öffnen.
- Die **Spiel-Box**: der Dialog, der in `modal` / `fullscreen` darüber aufgeht, mit dem Spiel darin. (In `inline` gibt es keinen separaten Dialog: das Panel ist das Spiel.)

Vier Attribute dimensionieren diese zwei Boxen. Jeder Wert ist einer von `auto` (der Standard), `full` (überspannt den verfügbaren Platz) oder eine positive Pixelzahl wie `480`.

| Attribut | Dimensioniert | Gilt in |
|---|---|---|
| `width` / `height` | Das Element in der Seite | Allen Layouts |
| `overlay-width` / `overlay-height` | Die Spiel-Box (Dialog + Spiel) | `modal`, `fullscreen` |

## Inline

Inline hat eine einzige Box, also dimensionieren `width` / `height` das ganze Panel. `overlay-width` / `overlay-height` bewirken hier nichts und werden ignoriert (das Widget protokolliert eine Warnung, wenn du sie setzt).

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

Hier sind die zwei Boxen unabhängig. `width` / `height` dimensionieren die **Eingangs-Checkbox** auf deiner Seite; `overlay-width` / `overlay-height` dimensionieren den **Dialog und das Spiel**, die aufgehen, wenn der Besucher sie klickt.

```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"` lässt das Spiel den Dialog entlang dieser Achse füllen; ein Pixelwert pinnt das Spiel auf diese Größe (ein Modal schmiegt sich eng darum). In `fullscreen` deckt der Dialog bereits den Viewport ab, also steuert `overlay-*`, ob sich das Spiel streckt, um ihn zu füllen, oder zentriert in seiner eigenen Größe sitzt.

## Wenn du die Spiel-Box ungesetzt lässt

Wenn du `overlay-width` / `overlay-height` nicht setzt, nimmt die Spiel-Box die Größe, die der **Spiel-Autor** für das Spiel gewählt hat (seinen bevorzugten Platzbedarf, deklariert in der `caputchin.json` des Spiels). Meistens brauchst du also nur `width` / `height` für dein Seitenlayout, und das Spiel dimensioniert sich vernünftig selbst. Setz `overlay-*` nur, wenn du das überschreiben willst.

## Pixelwerte

Eine schlichte Zahl sind CSS-Pixel: `width="500"` und `width="500px"` sind gleichwertig. Null, negative und nicht-numerische Werte werden abgewiesen (das Attribut fällt auf seinen Standard zurück und das Widget protokolliert eine Warnung).

## Siehe auch

- [Spiel-Widget-Element](/docs/getting-started/add-a-game): der vollständige Attributsatz von `<caputchin-game>`.
- [Widget-Methoden und -Events](/docs/references/widget-methods-and-events): das Widget treiben und darauf reagieren.