Sometimes, cropping to a certain aspect ratio will have no choice but to crop interesting areas of the image. When a compromise is needed, the new g_auto crop mode that pads when needed, will use just enough padding to get a good crop. Syntax: c_fill_pad,g_auto
Fill or Pad not applied:
Ruby:
cl_image_tag("eagle_closeup.jpg", :width=>600, :height=>400, :crop=>"fill")
PHP v1:
cl_image_tag("eagle_closeup.jpg", array("width"=>600, "height"=>400, "crop"=>"fill"))
PHP v2:
(new ImageTag('eagle_closeup.jpg'))
->resize(Resize::fill()->width(600)->height(400));
Python:
CloudinaryImage("eagle_closeup.jpg").image(width=600, height=400, crop="fill")
Node.js:
cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(600).height(400).crop("fill")).imageTag("eagle_closeup.jpg");
JS:
cloudinary.imageTag('eagle_closeup.jpg', {width: 600, height: 400, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, crop: "fill"})
React:
<Image publicId="eagle_closeup.jpg" >
<Transformation width="600" height="400" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="eagle_closeup.jpg" >
<cld-transformation width="600" height="400" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="eagle_closeup.jpg" >
<cl-transformation width="600" height="400" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(600).Height(400).Crop("fill")).BuildImageTag("eagle_closeup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(600).height(400).crop("fill")).generate("eagle_closeup.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(600).setHeight(400).setCrop("fill")).generate("eagle_closeup.jpg")!, cloudinary: cloudinary)
Fill or Pad applied:
Ruby:
cl_image_tag("eagle_closeup.jpg", :width=>600, :height=>400, :gravity=>"auto", :background=>"auto", :crop=>"fill_pad")
PHP v1:
cl_image_tag("eagle_closeup.jpg", array("width"=>600, "height"=>400, "gravity"=>"auto", "background"=>"auto", "crop"=>"fill_pad"))
PHP v2:
(new ImageTag('eagle_closeup.jpg'))
->resize(Resize::fillPad()->width(600)->height(400)
->gravity(Gravity::autoGravity())
->background(Background::auto()));
Python:
CloudinaryImage("eagle_closeup.jpg").image(width=600, height=400, gravity="auto", background="auto", crop="fill_pad")
Node.js:
cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
Java:
cloudinary.url().transformation(new Transformation().width(600).height(400).gravity("auto").background("auto").crop("fill_pad")).imageTag("eagle_closeup.jpg");
JS:
cloudinary.imageTag('eagle_closeup.jpg', {width: 600, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"}).toHtml();
jQuery:
$.cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
React:
<Image publicId="eagle_closeup.jpg" >
<Transformation width="600" height="400" gravity="auto" background="auto" crop="fill_pad" />
</Image>
Vue.js:
<cld-image publicId="eagle_closeup.jpg" >
<cld-transformation width="600" height="400" gravity="auto" background="auto" crop="fill_pad" />
</cld-image>
Angular:
<cl-image public-id="eagle_closeup.jpg" >
<cl-transformation width="600" height="400" gravity="auto" background="auto" crop="fill_pad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(600).Height(400).Gravity("auto").Background("auto").Crop("fill_pad")).BuildImageTag("eagle_closeup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(600).height(400).gravity("auto").background("auto").crop("fill_pad")).generate("eagle_closeup.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(600).setHeight(400).setGravity("auto").setBackground("auto").setCrop("fill_pad")).generate("eagle_closeup.jpg")!, cloudinary: cloudinary)
