Fitting an image within specified dimensions

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:

Ruby:
cl_image_tag("flower.jpg")
PHP:
cl_image_tag("flower.jpg")
Python:
CloudinaryImage("flower.jpg").image()
Node.js:
cloudinary.image("flower.jpg")
Java:
cloudinary.url().imageTag("flower.jpg")
JS:
cl.imageTag('flower.jpg').toHtml();
jQuery:
$.cloudinary.image("flower.jpg")
React:
<Image publicId="flower.jpg" >

</Image>
Angular:
<cl-image public-id="flower.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("flower.jpg")
Android:
MediaManager.get().url().generate("flower.jpg")
Original

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

Ruby:
cl_image_tag("flower.jpg", :width=>70, :height=>90, :crop=>"fit")
PHP:
cl_image_tag("flower.jpg", array("width"=>70, "height"=>90, "crop"=>"fit"))
Python:
CloudinaryImage("flower.jpg").image(width=70, height=90, crop="fit")
Node.js:
cloudinary.image("flower.jpg", {width: 70, height: 90, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().width(70).height(90).crop("fit")).imageTag("flower.jpg")
JS:
cl.imageTag('flower.jpg', {width: 70, height: 90, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.image("flower.jpg", {width: 70, height: 90, crop: "fit"})
React:
<Image publicId="flower.jpg" >
  <Transformation width="70" height="90" crop="fit" />
</Image>
Angular:
<cl-image public-id="flower.jpg" >
  <cl-transformation width="70" height="90" crop="fit">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(90).Crop("fit")).BuildImageTag("flower.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(70).height(90).crop("fit")).generate("flower.jpg")
Fit 70x90

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):

Ruby:
cl_image_tag("flower.jpg", :width=>300, :height=>100, :crop=>"fit")
PHP:
cl_image_tag("flower.jpg", array("width"=>300, "height"=>100, "crop"=>"fit"))
Python:
CloudinaryImage("flower.jpg").image(width=300, height=100, crop="fit")
Node.js:
cloudinary.image("flower.jpg", {width: 300, height: 100, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(100).crop("fit")).imageTag("flower.jpg")
JS:
cl.imageTag('flower.jpg', {width: 300, height: 100, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.image("flower.jpg", {width: 300, height: 100, crop: "fit"})
React:
<Image publicId="flower.jpg" >
  <Transformation width="300" height="100" crop="fit" />
</Image>
Angular:
<cl-image public-id="flower.jpg" >
  <cl-transformation width="300" height="100" crop="fit">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(100).Crop("fit")).BuildImageTag("flower.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(300).height(100).crop("fit")).generate("flower.jpg")
300x100 fit

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

Ruby:
cl_image_tag("flower.jpg", :overlay=>"happy_dog", :width=>500, :height=>500, :crop=>"fit")
PHP:
cl_image_tag("flower.jpg", array("overlay"=>"happy_dog", "width"=>500, "height"=>500, "crop"=>"fit"))
Python:
CloudinaryImage("flower.jpg").image(overlay="happy_dog", width=500, height=500, crop="fit")
Node.js:
cloudinary.image("flower.jpg", {overlay: "happy_dog", width: 500, height: 500, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().overlay("happy_dog").width(500).height(500).crop("fit")).imageTag("flower.jpg")
JS:
cl.imageTag('flower.jpg', {overlay: "happy_dog", width: 500, height: 500, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.image("flower.jpg", {overlay: "happy_dog", width: 500, height: 500, crop: "fit"})
React:
<Image publicId="flower.jpg" >
  <Transformation overlay="happy_dog" width="500" height="500" crop="fit" />
</Image>
Angular:
<cl-image public-id="flower.jpg" >
  <cl-transformation overlay="happy_dog" width="500" height="500" crop="fit">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("happy_dog").Width(500).Height(500).Crop("fit")).BuildImageTag("flower.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("happy_dog").width(500).height(500).crop("fit")).generate("flower.jpg")
Overlay fit

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):

Ruby:
cl_image_tag("flower.jpg", :width=>1200, :height=>1200, :crop=>"fit")
PHP:
cl_image_tag("flower.jpg", array("width"=>1200, "height"=>1200, "crop"=>"fit"))
Python:
CloudinaryImage("flower.jpg").image(width=1200, height=1200, crop="fit")
Node.js:
cloudinary.image("flower.jpg", {width: 1200, height: 1200, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().width(1200).height(1200).crop("fit")).imageTag("flower.jpg")
JS:
cl.imageTag('flower.jpg', {width: 1200, height: 1200, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.image("flower.jpg", {width: 1200, height: 1200, crop: "fit"})
React:
<Image publicId="flower.jpg" >
  <Transformation width="1200" height="1200" crop="fit" />
</Image>
Angular:
<cl-image public-id="flower.jpg" >
  <cl-transformation width="1200" height="1200" crop="fit">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(1200).Height(1200).Crop("fit")).BuildImageTag("flower.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(1200).height(1200).crop("fit")).generate("flower.jpg")
Larger dimensions

by Itay Taragano