What is the difference between "Fill", "Fit" and "Limit" scaling modes?

The Fill mode creates an image with the exact given width and height while retaining original proportions. The image might be bigger or smaller than the original one. When using the 'fill' mode, you can specify which part of the original image to use for filling the required dimensions in case the proportions do not match. You can do so by using the gravity parameter (or 'g' in URLs), which defines which part of the image to take.

For example, the following 425x282 image was uploaded to Cloudinary.

http://res.cloudinary.com/demo/image/upload/face_left.jpg

original

The following URL applied the fill crop mode with the 600x200 dimensions, which generated a 600x200 image with only part of the original image:

http://res.cloudinary.com/demo/image/upload/w_600,h_200,c_fill/face_left.jpg

fill

The Fit mode changes the image's size to fit in the given width & height while retaining original proportions. All original image parts are visible. Both width and height dimensions of the transformed image must not exceed the specified width & height.

The following image applied the fit crop mode with the 600x200 dimensions, which actually generated a 301x200 image:

http://res.cloudinary.com/demo/image/upload/w_600,h_200,c_fit/face_left.jpg

fit

While the following image applied the fit crop mode with the 600x400 dimensions, which actually generated a 600x398 image (scaling up the original image):

http://res.cloudinary.com/demo/image/upload/w_600,h_400,c_fit/face_left.jpg

fit

The Limit mode is similar to the Fit mode, except that the the resulting image is never bigger than the original one (in both X & Y)

The following image applied the limit crop mode with the 600x400 dimensions, which actually generated an image of the original 425x282 dimensions:

http://res.cloudinary.com/demo/image/upload/w_600,h_400,c_limit/face_left.jpg

limit

Have more questions? Submit a request

Comments

Powered by Zendesk