Relative size overlays

Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).

Main image

Main image

100% width-related

100% width-related

Including text

Including text
Ruby:
Copy to clipboard
cl_image_tag("black_bar.png")
PHP:
Copy to clipboard
cl_image_tag("black_bar.png")
Python:
Copy to clipboard
CloudinaryImage("black_bar.png").image()
Node.js:
Copy to clipboard
cloudinary.image("black_bar.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("black_bar.png");
JS:
Copy to clipboard
cloudinary.imageTag('black_bar.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("black_bar.png")
React:
Copy to clipboard
<Image publicId="black_bar.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="black_bar.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("black_bar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)
by Itay Taragano