Cloudinary offers multiple crop and resize options in both our Programmable Media and Media Optimizer products.
Three of the most commonly-used methods are the 'fill', 'fit', and 'limit' modes, each of which allow you to resize assets according to your requirements. The main difference between these methods is what happens when the requested output dimensions are a different size and aspect ratio to the original asset.
The fill crop mode creates an image with the exact width and height you specify, while retaining the original asset's aspect ratio. It may require cropping some of the input image to meet the requested output size, if the original asset is not the same aspect ratio. The output image can be bigger or smaller than the original asset.
When using the 'fill' mode, you can tell Cloudinary which part of the original image to focus on when cropping is required to produce the requested output size, and this is by passing the gravity parameter (or 'g' in URLs), which defines which part of the image to prioritize.
For example, the following 425x282 image was uploaded to Cloudinary.
The following URL applies the fill crop mode with the 600x200 dimensions, generating a 600x200 image with only part of the original image visible:
Applying the gravity option to this also, we can specify that any detected faces in the original input should be prioritized: https://res.cloudinary.com/demo/image/upload/c_fill,h_200,g_faces,w_600/face_left.jpg
The Fit mode changes the image's size to fit within a bounding box that's the specified width and height, while retaining the original asset's aspect ratio. All original parts of the original image will be visible, but as a result, the transformed image may be smaller than the specified width and height.
The following URL applies the fit crop mode with 600x200 dimensions, creating a derived version of the images that's 301x200, fitting within the requested dimensions and keeping all parts of the original input:
The following URL applies the fit crop mode with 600x400 dimensions, which generates a 600x398 image (scaling up the original image also):
The Limit mode is similar to the Fit mode, except that the the resulting image will never larger than the original input (in both height and width)
The following URL applies the limit crop mode with the same 600x400 dimensions as the 'fit' example above, this generates an image that keeps the original asset's 425x282 dimensions: