---
type: reference
title: Ukuran dan tata letak
summary: Bagaimana atribut width, height, overlay-width, dan overlay-height mengatur ukuran elemen caputchin-game di seluruh tata letak inline, modal, dan fullscreen.
---

Sebuah `<caputchin-game>` bisa dirender dalam tiga tata letak (disetel dengan atribut `layout`): `inline`, `modal`, dan `fullscreen`. Cara kamu mengatur ukurannya bergantung pada tata letak, karena tata letak modal dan fullscreen menampilkan **dua kotak terpisah**:

- **Elemen di halaman**: hal yang duduk di alur halamanmu. Di `inline` itu adalah seluruh panel game; di `modal` / `fullscreen` itu adalah checkbox kecil yang diklik pengunjung untuk membuka game.
- **Kotak game**: dialog yang terbuka di atas pada `modal` / `fullscreen`, dengan game di dalamnya. (Di `inline` tak ada dialog terpisah: panel itulah game-nya.)

Empat atribut mengatur ukuran kedua kotak ini. Setiap nilai adalah salah satu dari `auto` (bawaan), `full` (memenuhi ruang yang tersedia), atau angka piksel positif seperti `480`.

| Atribut | Mengatur ukuran | Berlaku di |
|---|---|---|
| `width` / `height` | Elemen di halaman | Semua tata letak |
| `overlay-width` / `overlay-height` | Kotak game (dialog + game) | `modal`, `fullscreen` |

## Inline

Inline punya satu kotak, jadi `width` / `height` mengatur ukuran seluruh panel. `overlay-width` / `overlay-height` tak melakukan apa pun di sini dan diabaikan (widget mencatat peringatan kalau kamu menyetelnya).

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

Di sini kedua kotak itu independen. `width` / `height` mengatur ukuran **checkbox masuk** di halamanmu; `overlay-width` / `overlay-height` mengatur ukuran **dialog dan game** yang terbuka saat pengunjung mengkliknya.

```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"` membuat game memenuhi dialog sepanjang sumbu itu; sebuah nilai piksel mematok game ke ukuran itu (sebuah modal membungkus ketat di sekelilingnya). Di `fullscreen` dialog sudah menutupi viewport, jadi `overlay-*` mengendalikan apakah game merentang untuk memenuhinya atau duduk di tengah pada ukurannya sendiri.

## Saat kamu membiarkan kotak game tak disetel

Kalau kamu tak menyetel `overlay-width` / `overlay-height`, kotak game memakai ukuran yang dipilih **penulis game** untuk game itu (jejak yang ia sukai, dideklarasikan di `caputchin.json` game tersebut). Jadi sebagian besar waktu kamu hanya perlu `width` / `height` untuk tata letak halamanmu, dan game mengatur ukurannya sendiri dengan masuk akal. Setel `overlay-*` hanya saat kamu mau menimpa itu.

## Nilai piksel

Sebuah angka biasa adalah piksel CSS: `width="500"` dan `width="500px"` setara. Nilai nol, negatif, dan non-numerik ditolak (atribut jatuh kembali ke bawaannya dan widget mencatat peringatan).

## Lihat juga

- [Elemen widget game](/docs/getting-started/add-a-game): set atribut `<caputchin-game>` yang lengkap.
- [Metode dan event widget](/docs/references/widget-methods-and-events): mengemudikan widget dan menanggapinya.