Cloudinary Cookbook recipes about Relative

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

100% width-related

Including text

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/black_bar.png

Ruby:

cl_image_tag("black_bar.png")

PHP:

cl_image_tag("black_bar.png")

Python:

CloudinaryImage("black_bar.png").image()

Node.js:

cloudinary.image("black_bar.png")

Java:

cloudinary.url().imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png').toHtml();

jQuery:

$.cloudinary.image("black_bar.png")

React:

<Image publicId="black_bar.png" >

</Image>

Vue.js:

<cld-image publicId="black_bar.png" >

</cld-image>

Angular:

<cl-image public-id="black_bar.png" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)

by Itay Taragano Jul 19, 2015

Tags: