Contain image

Image styletype: "image"

Show the whole image letterboxed inside its box with object-fit contain and a neutral backdrop, swapping the URL on every API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Contain” variant

{
  "title": "Image sample",
  "description": "A rounded dynamic photo",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-image",
      "key": "photo",
      "type": "image",
      "position": {
        "x": 250,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 300,
        "height": 300
      },
      "dynamic": true,
      "image": "https://picsum.photos/600/600",
      "properties": {
        "imageSize": "contain",
        "borderRadius": 0,
        "opacity": 1,
        "backgroundColor": "#F3F4F6"
      }
    }
  ]
}

Image examples

Real renders of the contain image — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Uncropped product shot

A catalog photo letterboxed on white with a hairline border.

API overrides for this example

{
  "photo.imageSize": "contain",
  "photo.backgroundColor": "#FFFFFF",
  "photo.borderRadius": 8,
  "photo.padding": "20px",
  "photo.borderWidth": 1,
  "photo.borderColor": "#E5E7EB",
  "photo.borderStyle": "solid"
}

Screenshot embed in a social card

A wide screenshot letterboxed on slate inside a dark social card.

API overrides for this example

{
  "photo.imageSize": "contain",
  "photo.backgroundColor": "#1E293B",
  "photo.borderRadius": 12
}

When to use the contain style

Product shots that must never be cropped
Logos with unpredictable aspect ratios
Screenshot embeds in social cards

Use it dynamically via the API

Point '<key>.image' (or just '<key>') at any image URL per render; opacity, borders and padding can be overridden too.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "photo.image": "https://picsum.photos/600/600",
    "photo.imageSize": "contain",
    "photo.borderRadius": 0,
    "photo.opacity": 1,
    "photo.backgroundColor": "#F3F4F6"
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other image styles

DefaultContainCircle avatar Polaroid

See the image component page for the full property reference and FAQs.