LogoLogo
BlogHelp CenterPrivacyLoginRegister
  • Let's optimize your images
  • Transformations
    • Input formats
    • Image operations
      • Width and height
      • Prevent enlargement
      • Crop
        • Automatic gravity crop
        • Positionable crop
        • Focal point crop
        • Face crop
        • Face hide
        • Aspect ratio crop
      • Fit
      • Cropfit
      • Bound
      • Boundmin
      • Cover
      • Device pixel ratio
      • Flip
      • Rotate
      • Trim
      • Rounded corners
      • Background removal
    • Image filters
      • Adjustment
        • Brightness
        • Contrast
        • Saturate
      • Color manipulation
        • Color overlay
        • Grayscale
        • Duotone
        • Sepia
        • Invert
      • Blur
      • Pixelate
      • Sharpen
      • Face blur
    • Image watermarking
      • Static watermark
      • Dynamic watermark
      • Text watermark
        • Text watermark fonts
    • Image compression
      • Image formats
      • Optipress
      • SVG compression
      • Color management
    • Static content
      • PDF to image
      • JS/CSS optimization
    • Video operations
  • Setup
    • Shortening URLs
      • Origin URL prefix
      • Aliases
      • Presets
      • Rules
    • Connecting storage bucket
      • Amazon S3
      • Google Cloud Storage
      • Microsoft Azure Blob
      • Basic authentication HTTP
    • Security
      • Token security
        • Domain whitelisting
        • URL signature
        • URL sealing
      • Account security
      • Origin security
  • Implementation
    • URL API implementation
    • Responsive images JS plugin
    • CMS plugins
      • Spryker
      • Drupal
      • Kontent.ai
      • Contentful
      • Adobe Commerce (Magento)
        • Basic implementation
        • Advanced implementation
      • Opencart
      • Prestashop
        • Prestashop tutorial
      • Shopware
      • Sylius
      • Wordpress
      • Shopify tutorial
        • Shopify integration
        • Theme files
        • FAQ
      • Commercetools tutorial
      • Ruby wrapper
    • Migrating from another image CDN
  • Caching and acceleration
    • CDN basics
    • Caching interval
    • Invalidation API
    • Warmup API
  • Analytics
    • Dashboards
      • Overview
      • Volumetry
      • Optimization
      • Delivery
      • Top-Ranking
      • RUM
      • Logs API
  • Cloudimage_v6 EOL
Powered by GitBook
LogoLogo

Resources

  • Help center
  • Contact support
  • Developers
  • cloudimage.io

Solutions

  • Media optimization
  • DAM
  • Performance report

Company

  • Blog
  • Service status
  • About us

Legal stuff

  • Terms & conditions
  • Privacy center
  • DMCA

Copyright © 2023 Scaleflex

On this page
  • Gravity
  • Examples

Was this helpful?

Export as PDF
  1. Transformations
  2. Image operations

Fit

Fits the image in a box with padding when needed

Resizes the image to fit into a specified width and height box, adds padding (image or solid color) to keep proportions, and delivers the resulting image via CDN.

func=fit

Please note that by default, smaller images will not be upscaled to fit the box. If you want to enable this behavior, you need to use fit_enlarge=1. along with func=fit.

The padding can be customized using the following additional operations:

Operation
Syntax
Description

gravity

gravity=X X=[north|south][east|west]

sets the position of the image in the fit box

solid background

bg_color=X | bg_colour=X X={hex color}|auto

defines a background color with a hex code, color name or automatically, based on the image palette

blurred background

bg_img_fit=1

sets blurred image background

bg_blur=X

applies Gaussian blur to the background image

bg_opacity=X X=0..1

specifies background image opacity

bg_colorize=X | bg_colourise=X

defines a color to tint the background image

bg_gravity=X X=[north|south][east|west]

defines the positioning of the background image within its container

image upscaling

fit_enlarge=1

allows upscaling smaller images to the desired dimensions (will result in inferior image resolution)

Gravity

northwest

north

northeast

west

center | centre (default)

east

southwest

south

southeast

Examples

Preview
Syntax

No upscaling of smaller images (default):

Upscaling allowed:

PreviousAspect ratio cropNextCropfit

Last updated 1 month ago

Was this helpful?

Solid background:

Automatic solid background:

Blurred background:

Blurred background, tinted:

Align Background image to right (east gravity):

Align Background image to left (west gravity):

/sample.li/hotel.jpg?w=400&h=245&func=fit&bg_color=000
/sample.li/frog.png?func=fit&w=400&h=220&bg_colour=auto
/sample.li/car1.jpg?w=400&h=320&func=fit&bg_img_fit=1&bg_opacity=0.75
/sample.li/boat.jpg?func=fit&w=400&h=330&bg_img_fit=1&bg_opacity=0.5&bg_colorize=red
/sample.li/classroom.jpg?func=fit&width=600&height=600&q=70&bg_img_fit=1&bg_blur=15&bg_gravity=east&bg_colorize=lc000000&bg_opacity=0.5
/sample.li/classroom.jpg?func=fit&width=600&height=600&q=70&bg_img_fit=1&bg_blur=15&bg_gravity=west&bg_colorize=lc000000&bg_opacity=0.5
/sample.li/castle_doc.jpg?w=600&h=245&func=fit&bg_color=113650
/sample.li/castle_doc.jpg?w=600&h=245&func=fit&bg_color=113650&fit_enlarge=1