---
title: "Resize"
canonical_url: https://docs.zvid.io/docs/structure/properties/resize/
source: docs/structure/properties/resize.md
content_revision: 6338386a1dd87e4a
---

# Resize

`resize` scales media while preserving the asset aspect ratio. What it scales
against depends on whether the element declares its own box:

- **With explicit `width`/`height`** the media is fitted **into that box**,
  exactly like CSS `object-fit`. The box, position, corner radius, and
  animations all stay as authored; only the pixels inside the box change.
- **Without `width`/`height`** the media is sized against the **project
  canvas** — the usual way to make a background fill the whole frame.

```typescript
type ResizeMode = "contain" | "cover";
```

| Value     | With a box                                        | Without a box                            |
| --------- | ------------------------------------------------- | ---------------------------------------- |
| `contain` | Fits the full asset inside the box (letterboxed). | Fits the full asset inside the canvas.   |
| `cover`   | Fills the box, center-cropping the overflow.      | Fills the canvas and may crop the asset. |

`resize` is supported for `IMAGE`, `VIDEO`, and `GIF` elements.

> **HTML/`TEXT` elements (and the deprecated SVG element) use explicit `width` and**
`height` instead of `resize`. Although `resize` may pass API validation for SVG,
it is not applied during rendering.

## Full-frame background

Visual element fragment for `payload.visuals`. Replace the illustrative asset
URL with your own public image URL. See [Layout](https://docs.zvid.io/docs/concepts/layout/) for
the difference between an element's box and the pixels fitted inside it.

```json
{
  "type": "IMAGE",
  "src": "https://cdn.example.com/photo.jpg",
  "resize": "cover",
  "position": "center-center"
}
```

## Boxed card

```json
{
  "type": "IMAGE",
  "src": "https://cdn.example.com/photo.jpg",
  "width": 880,
  "height": 1180,
  "x": 540,
  "y": 780,
  "anchor": "center-center",
  "resize": "cover",
  "radius": { "tl": 48, "tr": 48, "br": 48, "bl": 48 }
}
```

The photo is center-cropped into the 880×1180 rounded card no matter what
aspect ratio the source has.

## Used By

- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Video Elements](https://docs.zvid.io/docs/structure/video-elements/)
- [GIF Elements](https://docs.zvid.io/docs/structure/gif-elements/)


resize: cover fills the box, cropping overflow

[Watch rendered example](https://cdn.zvid.io/library/docs/img-cover.mp4)