Reduce an image to fill a shape with a different aspect ratio

Maintain an image’s aspect ratio while reducing its size to fit into a box on your web page.

Reduce an image’s size so it fits exactly in a box on your web page and, for design aesthetics, hide the extra space caused by the image and box having different aspect ratios.

The Fit and Fill transformation lets you resize an image to fit within a specific size box (maintaining aspect ratio) and then uses a blurred fill of that same image to cover any transparent space at the edges. This helps preserve the integrity of your page layout and make your website more visually appealing.

In this recipe we'll reduce the size of an image to fit into a box with a different aspect ratio. Since the image and the box are different shapes there will be extra space around the top and bottom of the box. To solve this issue, Image and Video Manager automatically hides the extra space around an image using a blurred fill. This behavior is an effect commonly used on television when displaying portrait videos in a landscape frame.

Here's the image before and after we reduced its size to fit into box on our webpage:

The Fit and Fill transformation can also fill horizontally:

How to

  1. Go to > CDN > Image and Video Manager.
  2. Select a contract and a policy set name, then click Manage Policies.
  3. Click Add New Policy.
    The Name Your Policy window appears:
  4. Enter the policy name in the Policy Name field and click OK. In our case, we entered FitAndFill.
    The Image Policy Editor appears.
  5. Add the Fit and Fill transformation by expanding the Transformation menu and selecting Fit and Fill.
  6. The Fit and Fill configuration screen appears.
  7. Next, we'll configure the Fit and Fill parameters. The Width and Height parameters specify the dimensions of the finished image in pixels. For this policy, we'll fix the width at 400 pixels and the height at 500 pixels.
    Note: The image dimensions can be either a fixed value or a variable.

    To set up Fit and Fill, specify the widths and height of the finished image in pixels.

    The following image now appears:

    Image and Video Manager transformations can also be executed programmatically via Akamai’s OPEN APIs or IMQuery transformation.

    For example, here's the JSON-formatted API call for our FitAndFill transformation:

    {
    	"transformation": "FitAndFill",
    	"width":          400,
    	"height":         500
    }
    

    To generate the same results using the IMQuery transformation, add the IMQuery string to the image URL:

    im=FitAndFill=(400,500)

Next steps

For more information about adding Fit and Fill transformations to images, see the Image and Video Manager Help.

For more information about programmatically executing transformations using Akamai’s OPEN APIs, see Image Manager API v2.

For more information about adding Fit and Fill transformations using an IMQuery string, see IMQuery in the Image and Video Manager Help.