Back to Docs

Image Fill Transformation

The Fill feature automatically resizes and crops your images to fit exact dimensions without distortion. This is perfect for creating uniformly sized thumbnails, banners, or any situation where you need images to fit into precise dimensions while maintaining their visual integrity.

Basic Usage

To use the Fill feature in Vyso DAM, specify the target dimensions in your image URL:

https://assets.vyso.io/account_id/image/asset_id/fill,w_600,h_400/asset.jpg

Parameters

ParameterDescriptionExample
wTarget width in pixelsw_600
hTarget height in pixelsh_400
gGravity (focus point) for the fill operationg_center (default), g_north, g_south, etc.
bgBackground color (if padding is needed)bg_ffffff (white)

How Fill Works

The Fill operation works in the following way:

  1. The image is resized to completely cover the target dimensions while maintaining its aspect ratio.
  2. If the resized image is larger than the target dimensions, it is cropped based on the gravity parameter.
  3. The result is an image that exactly matches the requested dimensions.

Examples

Basic Fill

To fill a 300×300 square with an image:

https://assets.vyso.io/account_id/image/asset_id/fill,w_300,h_300/asset.jpg

Fill with Custom Gravity

To fill a 600×400 rectangle with focus on the bottom of the image:

https://assets.vyso.io/account_id/image/asset_id/fill,w_600,h_400,g_south/asset.jpg

Gravity Options

The gravity parameter controls which part of the image is preserved during cropping:

  • g_center - Focus on the center (default)
  • g_north - Focus on the top
  • g_northeast - Focus on the top-right
  • g_east - Focus on the right
  • g_southeast - Focus on the bottom-right
  • g_south - Focus on the bottom
  • g_southwest - Focus on the bottom-left
  • g_west - Focus on the left
  • g_northwest - Focus on the top-left

Best Practices

  • Choose the right gravity - Select a gravity option that keeps the important parts of your image visible.
  • Consider aspect ratios - Be mindful of aspect ratio changes and how they might affect the visual impact of your images.
  • Use for UI elements - Fill is perfect for creating consistent UI elements like thumbnails, cards, or profile pictures.