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

{
  "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