Fitting an image within specified dimensions
Fitting an image within specified dimensions
Presentation
Cropping
Beginner

To change the image size to fit in given width and height while retaining original proportions, specify the width and height parameters (w and h in URLs) while setting the crop parameter to fit (c_fit in URLs).

When using the 'fit' crop mode, all original image parts are visible. Both width and height dimensions of the transformed image must not exceed the specified width & height. However, they may be smaller than the specified values in order to keep the original proportion.

Here's an original image: Original

https://res.cloudinary.com/demo/image/upload/flower.jpg

Here's how to make the image fit within 70x90 boundaries: Fit 70x90

https://res.cloudinary.com/demo/image/upload/w_70,h_90,c_fit/flower.jpg

Note that the result image is actually 70x47 in order to keep the original proportions of 864x567 (~1.5).

Here's an example of fitting the original image to 300x100, which will generate a 150x100 image (retaining the 1.5 aspect ratio): 300x100 fit

https://res.cloudinary.com/demo/image/upload/w_300,h_100,c_fit/flower.jpg

The 'fit' crop mode can be applied on overlays as well: Overlay fit

https://res.cloudinary.com/demo/image/upload/l_happy_dog,w_500,h_500,c_fit/flower.jpg

Note that the fit crop mode enlarges the image when requesting larger width and height than the original image's dimensions. For example (original is 912x608): Larger dimensions

https://res.cloudinary.com/demo/image/upload/w_1200,h_1200,c_fit/flower.jpg