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.

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.

note

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 for the difference between an element's box and the pixels fitted inside it.

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

Boxed card

{
  "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
• Video Elements
• GIF Elements

resize: cover fills the box, cropping overflow

Watch video