Cloudinary supports changing the aspect ratio of an image using different cropping methods, including padding with a uniform color of your choice. For example (preserving the original height):
http://res.cloudinary.com/demo/image/upload/h_1.0,ar_3:2,c_pad,b_rgb:6A854E/butterfly.jpg
Some people may prefer to have a softer background which will correspond to the colors of the original image but won't attract attention. In this case, you can use the following approach (preserving the original height):
http://res.cloudinary.com/demo/image/upload/u_butterfly,h_1.0,ar_3:2,c_scale,e_blur:1000,o_70/butterfly.jpg
The same effect can be achieved by transforming a landscape image to a 1:1 frame by preserving the original width and adjusting the aspect ratio, for example:
http://res.cloudinary.com/demo/image/upload/u_face_left,w_1.0,ar_1,c_scale,e_blur:1000,o_70/face_left.jpg
An additional option for changing the image orientation is making use of our automatic background color feature(b_auto
):
https://res.cloudinary.com/demo/image/upload/w_300,h_300,c_pad,b_auto/dog.jpg
Now with the image faded into the padding:
For more information and other padding options please see:
https://cloudinary.com/blog/how_to_pad_images_with_automatic_color_selection
Comments
6 comments
let s that your example (picture 1) I want to get at the end the image on the left and not center as in the example i want the resulting=> (picture 2)
Let me know please if it's possible because sometimes people prefer to display picture like this 💁🏼♀️ i can't find the solution with Cloudinary
❤️hope that someone has an idea, and that my question will help
picture1
picture 2
Hey Vincent,
Something like this (g_west)?
http://res.cloudinary.com/demo/image/upload/h_1.0,ar_3:2,c_pad,b_rgb:6A854E,g_west/butterfly.jpg
Please let me know if it helps you.
Cheers
Yakir
Yes this is it ❤️ thanks that sound very good ! 💪🏽 the key value doc ruby rails for g_west (:gravity=>"west") ? ??
example :
:quality=>"auto:good"
THANKS A LOT
Exactly:
Next time, please don't wait 5 months, we are here to help :)
Cheers,
Yakir
I want to use this transformation http://res.cloudinary.com/demo/image/upload/u_face_left,w_1.0,ar_1,c_scale,e_blur:1000,o_70/face_left.jpg
But i have a slash in my public_id. So I'm not able to use u_{public_id}.
Can you help me ?
Hi Vinod,
If the asset that you want to overlay/underlay is in a folder, you can replace the folder slash with a colon. For example, if you want to overlay an asset with the public_id of 'animals/kitten', that transformation syntax would look like 'l_animals:kitten' This applies no matter how deeply nested the folder structure is. So if the public id were 'animals/cats/kitten' then the transformation syntax becomes 'l_animals:cats:kitten'
I hope this helps. If you have any questions at all, do not hesitate to ask.
Kind regards,
Tia
Please sign in to leave a comment.