---
type: reference
title: Размер и макет
summary: Как атрибуты width, height, overlay-width и overlay-height задают размер элемента caputchin-game в макетах inline, modal и fullscreen.
---

`<caputchin-game>` может рендериться в трёх макетах (задаются атрибутом `layout`): `inline`, `modal` и `fullscreen`. Как ты задаёшь его размер, зависит от макета, потому что макеты modal и fullscreen показывают **две отдельные коробки**:

- **Элемент на странице**: то, что сидит в потоке твоей страницы. В `inline` это вся панель игры; в `modal` / `fullscreen` это маленькая галочка, которую посетитель кликает, чтобы открыть игру.
- **Коробка игры**: диалог, который открывается сверху в `modal` / `fullscreen`, с игрой внутри. (В `inline` отдельного диалога нет: панель и есть игра.)

Четыре атрибута задают размер этих двух коробок. Каждое значение это одно из `auto` (по умолчанию), `full` (охватывает доступное пространство) или положительное число пикселей вроде `480`.

| Атрибут | Задаёт размер | Действует в |
|---|---|---|
| `width` / `height` | Элемент на странице | Всех макетах |
| `overlay-width` / `overlay-height` | Коробка игры (диалог + игра) | `modal`, `fullscreen` |

## Inline

У inline одна коробка, поэтому `width` / `height` задают размер всей панели. `overlay-width` / `overlay-height` тут ничего не делают и игнорируются (виджет выводит предупреждение, если ты их задаёшь).

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

Здесь две коробки независимы. `width` / `height` задают размер **входной галочки** на твоей странице; `overlay-width` / `overlay-height` задают размер **диалога и игры**, которые открываются, когда посетитель её кликает.

```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"` заставляет игру заполнить диалог вдоль этой оси; значение в пикселях прикрепляет игру к этому размеру (модал плотно облегает её). В `fullscreen` диалог уже покрывает вьюпорт, так что `overlay-*` управляет тем, растягивается ли игра, чтобы заполнить его, или сидит по центру в своём собственном размере.

## Когда ты оставляешь коробку игры незаданной

Если ты не задаёшь `overlay-width` / `overlay-height`, коробка игры берёт размер, который **автор игры** выбрал для игры (её предпочитаемый след, объявленный в `caputchin.json` игры). Так что большую часть времени тебе нужны только `width` / `height` для макета твоей страницы, а игра задаёт свой размер разумно сама. Задавай `overlay-*` только когда хочешь это переопределить.

## Значения в пикселях

Простое число это CSS-пиксели: `width="500"` и `width="500px"` эквивалентны. Нулевые, отрицательные и нечисловые значения отвергаются (атрибут откатывается к своему значению по умолчанию, а виджет выводит предупреждение).

## См. также

- [Элемент игрового виджета](/docs/getting-started/add-a-game): полный набор атрибутов `<caputchin-game>`.
- [Методы и события виджета](/docs/references/widget-methods-and-events): управлять виджетом и реагировать на него.